at 功能实现vue
使用 Vue 实现 at 功能
在 Vue 中实现 at 功能（类似 @ 提及用户）需要结合输入框的事件监听、用户列表渲染和文本替换逻辑。以下是具体实现方法：
监听输入框事件
通过 @input 或 @keyup 监听输入框内容变化，检测是否输入了 @ 符号：
<template>
<textarea
v-model="content"
@input="handleInput"
@keyup="handleKeyUp"
></textarea>
</template>检测 @ 符号并显示用户列表
当检测到 @ 符号时，显示可选用户列表：
data() {
return {
content: '',
showUserList: false,
users: ['用户1', '用户2', '用户3'],
filteredUsers: [],
atPosition: 0
}
},
methods: {
handleInput(e) {
const cursorPos = e.target.selectionStart;
const textBeforeCursor = this.content.slice(0, cursorPos);
const lastAtPos = textBeforeCursor.lastIndexOf('@');
if (lastAtPos !== -1) {
const searchText = textBeforeCursor.slice(lastAtPos + 1);
this.filteredUsers = this.users.filter(user =>
user.includes(searchText)
);
this.showUserList = this.filteredUsers.length > 0;
this.atPosition = lastAtPos;
} else {
this.showUserList = false;
}
}
}选择用户并插入文本
当用户从列表中选择时，替换 @ 后的文本：
methods: {
selectUser(user) {
const beforeAt = this.content.slice(0, this.atPosition);
const afterAt = this.content.slice(this.content.indexOf(' ', this.atPosition));
this.content = `${beforeAt}@${user} ${afterAt}`;
this.showUserList = false;
this.$nextTick(() => {
this.$refs.textarea.focus();
});
}
}渲染用户列表
在模板中渲染过滤后的用户列表：
<template>
<div class="at-container">
<textarea ref="textarea" v-model="content" @input="handleInput"></textarea>
<ul v-if="showUserList" class="user-list">
<li
v-for="user in filteredUsers"
:key="user"
@click="selectUser(user)"
>
{{ user }}
</li>
</ul>
</div>
</template>样式优化
添加基本样式改善用户体验：
.at-container {
position: relative;
}
.user-list {
position: absolute;
background: white;
border: 1px solid #ddd;
max-height: 200px;
overflow-y: auto;
}
.user-list li {
padding: 5px 10px;
cursor: pointer;
}
.user-list li:hover {
background: #f0f0f0;
}高级功能扩展
支持异步用户搜索
对于大量用户，可以添加防抖和异步搜索：
import _ from 'lodash';
methods: {
handleInput: _.debounce(function(e) {
// 异步搜索逻辑
api.searchUsers(searchText).then(users => {
this.filteredUsers = users;
});
}, 300)
}支持键盘导航
添加键盘上下选择功能：
handleKeyUp(e) {
if (this.showUserList) {
if (e.key === 'ArrowUp' || e.key === 'ArrowDown') {
// 键盘导航逻辑
}
if (e.key === 'Enter') {
// 确认选择
}
}
}文本高亮显示
使用自定义指令或组件高亮显示 @ 提及的用户：
Vue.directive('highlight', {
inserted(el, binding) {
el.innerHTML = binding.value.replace(/@(\w+)/g, '<span class="mention">@$1</span>');
}
});通过以上方法，可以在 Vue 中实现完整的 at 功能，包括用户提及、列表展示和文本替换等功能。
