vue的艾特功能实现
Vue 的 @ 功能实现
在 Vue 中实现类似社交平台的 @ 功能，通常涉及输入框的监听、用户匹配和选择插入。以下是具体实现方法：
监听输入框内容
使用 v-model 绑定输入框内容，并通过 @input 或 @keyup 监听输入变化。当检测到 @ 符号时，触发用户匹配逻辑。
<template>
<textarea v-model="content" @input="handleInput"></textarea>
<div v-if="showUserList">
<div v-for="user in filteredUsers" @click="selectUser(user)">
{{ user.name }}
</div>
</div>
</template>
<script>
export default {
data() {
return {
content: '',
showUserList: false,
users: [], // 用户列表数据
filteredUsers: [] // 匹配到的用户
};
},
methods: {
handleInput() {
const lastAtPos = this.content.lastIndexOf('@');
if (lastAtPos >= 0) {
const query = this.content.slice(lastAtPos + 1);
this.filteredUsers = this.users.filter(user =>
user.name.includes(query)
);
this.showUserList = this.filteredUsers.length > 0;
} else {
this.showUserList = false;
}
},
selectUser(user) {
const lastAtPos = this.content.lastIndexOf('@');
this.content =
this.content.slice(0, lastAtPos + 1) +
user.name + ' ';
this.showUserList = false;
}
}
};
</script>高亮显示 @ 用户
通过正则表达式匹配内容中的 @用户，并使用 <span> 标签包裹实现高亮。
methods: {
formatContent(content) {
return content.replace(/@(\w+)/g, '<span class="mention">@$1</span>');
}
}.mention {
color: blue;
font-weight: bold;
}后端数据交互
将最终的输入内容（包含 @用户 信息）提交到后端，后端解析后通知被提及的用户。
methods: {
submitContent() {
axios.post('/api/submit', { content: this.content })
.then(response => {
console.log('提交成功');
});
}
}使用现成库
如果需要快速实现，可以使用现成的 Vue 库如 vue-mention，简化开发流程。
安装：
npm install vue-mention使用示例：
<template>
<vue-mention
v-model="content"
:items="users"
item-text="name"
@search="onSearch"
/>
</template>通过以上方法，可以灵活实现 Vue 中的 @ 功能，满足社交平台或协作工具的需求。
