当前位置：首页 > VUE

at 功能实现vue

2026-02-18 15:34:51VUE

Vue 中实现 at（@）功能的方法

在 Vue 中实现 at（@）功能通常用于提及用户或触发自动补全，类似社交平台的评论或聊天功能。以下是几种常见实现方式：

使用自定义指令监听输入

创建自定义指令监听输入框的 @ 符号输入，触发用户列表显示：

at 功能实现vue

Vue.directive('at-mention', {
  bind(el, binding) {
    el.addEventListener('input', (e) => {
      const value = e.target.value;
      const lastChar = value.slice(-1);
      if (lastChar === '@') {
        binding.value.showUserList();
      }
    });
  }
});

结合文本域与下拉组件

通过组合 textarea 和下拉选择组件实现交互：

at 功能实现vue

<template>
  <div>
    <textarea 
      v-model="content" 
      @input="handleInput"
      placeholder="输入 @ 提及用户">
    </textarea>
    <user-list 
      v-if="showList"
      :users="filteredUsers"
      @select="insertUser">
    </user-list>
  </div>
</template>

使用第三方库

集成现成的库如 vue-at 快速实现功能：

npm install vue-at

import At from 'vue-at'
Vue.component('at', At)

<template>
  <at :members="users">
    <textarea v-model="text"></textarea>
  </at>
</template>

内容渲染处理

对包含 @ 的内容进行特殊样式渲染：

computed: {
  formattedContent() {
    return this.content.replace(/@(\w+)/g, '<span class="mention">@$1</span>');
  }
}

完整示例组件

export default {
  data() {
    return {
      content: '',
      showList: false,
      users: ['Alice', 'Bob', 'Charlie'],
      filteredUsers: []
    }
  },
  methods: {
    handleInput(e) {
      const cursorPos = e.target.selectionStart;
      const textBeforeCursor = this.content.slice(0, cursorPos);
      const atPos = textBeforeCursor.lastIndexOf('@');

      if (atPos > -1) {
        const searchText = textBeforeCursor.slice(atPos + 1);
        this.filteredUsers = this.users.filter(u => 
          u.toLowerCase().includes(searchText.toLowerCase())
        );
        this.showList = this.filteredUsers.length > 0;
      } else {
        this.showList = false;
      }
    },
    insertUser(user) {
      const cursorPos = this.$refs.textarea.selectionStart;
      const textBefore = this.content.slice(0, cursorPos);
      const atPos = textBefore.lastIndexOf('@');

      this.content = 
        this.content.slice(0, atPos) + 
        `@${user} ` + 
        this.content.slice(cursorPos);

      this.showList = false;
    }
  }
}