Vue-At 插件终极使用指南：如何在Vue项目中轻松实现@提及功能

想要在Vue应用中添加类似社交媒体中的@提及功能吗？Vue-At 正是你需要的解决方案！这个轻量级的 Vue.js 插件让用户提及功能变得简单快捷，无需复杂的配置就能实现智能匹配和下拉选择。🚀

Vue-At 是基于原生 JavaScript 构建的 At.js 实现，专为 Vue 生态设计。它支持所有主流浏览器，包括 Chrome、Firefox、Edge，甚至兼容 IE9~IE11。无论你是使用 Vue3、Vue2 还是 Vue1，都能找到对应的版本支持。

🔥 Vue-At 核心功能特性

• 纯文本驱动 - 无需 jQuery，不产生额外 DOM 节点
• 双模式支持 - 同时兼容 Content-Editable 和 Textarea
• 头像支持 - 可自定义用户列表模板
• 多框架适配 - 完美支持 Vuetify、Element UI、Element Plus
• UMD 支持 - 可直接通过 script 标签引入使用

📦 快速安装与配置

安装 Vue-At 非常简单，根据你的 Vue 版本选择合适的包：

# Vue3 用户
npm i vue-at@next

# Vue2 用户  
npm i vue-at@2.x

# Vue1 用户
npm i vue-at@1.x

🎯 基础使用方法

Content-Editable 模式

适用于富文本编辑器场景，提供更丰富的样式控制：

<template>
  <at :members="members">
    <div :contenteditable="true"></div>
  </at>
</template>

<script>
import At from 'vue-at'

export default {
  components: { At },
  data() {
    return {
      members: ['Roxie Miles', 'grace.carroll', '小浩']
    }
  }
}
</script>

Textarea 模式

适用于普通文本输入框，保持轻量简洁：

<template>
  <at-ta :members="members">
    <textarea></textarea>
  </at-ta>
</template>

<script>
import AtTa from 'vue-at/dist/vue-at-textarea'

export default {
  components: { AtTa },
  data() {
    return {
      members: ['Roxie Miles', 'grace.carroll', '小浩']
    }
  }
}
</script>

Vue-At 在输入框中展示用户选择下拉菜单

⚡ 推荐使用 V-Model

为了更好的开发体验，建议使用 v-model 进行双向数据绑定：

<at v-model:value="html">
  <div :contenteditable="true"></div>
</at>

<at-ta v-model:value="text">
  <textarea></textarea>
</at-ta>

🎨 自定义模板功能

自定义用户列表

想要在用户列表中显示头像？Vue-At 支持完全自定义的列表模板：

<template>
  <at :members="members" name-key="name">
    <template slot="item" slot-scope="s">
      <img :src="s.item.avatar">
      <span v-text="s.item.name"></span>
    </template>
    <div :contenteditable="true"></div>
  </at>
</template>

<script>
export default {
  data() {
    return {
      members: [{
        avatar: 'https://randomuser.me/api/portraits/men/2.jpg',
        name: 'myrtie.green'
      }, {
        avatar: 'https://randomuser.me/api/portraits/men/8.jpg',
        name: '椿木'
      }]
    }
  }
}
</script>

支持中英文混合用户名的自定义列表展示

自定义嵌入标签

你还可以自定义插入后的标签样式，让提及的用户以特殊样式显示：

<template #embeddedItem="s">
  <span><span class="tag">
    <img class="avatar" :src="s.current.avatar">
    {{ s.current.name }}
  </span></span>
</template>

🔌 第三方UI库集成

与 Vuetify 集成

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

与 Element UI / Element Plus 集成

<at-ta :members="members">
  <el-input v-model="text" type="textarea"></el-input>
</at-ta>

💡 实用配置选项

Vue-At 提供了丰富的配置选项来满足不同需求：

• ats - 设置触发字符，默认 ['@']
• suffix - 设置插入后的后缀，默认空格
• loop - 是否循环选择，默认 true
• allowSpaces - 是否允许空格，默认 true
• hoverSelect - 是否支持鼠标悬停选择

🚀 性能优化建议

1. 合理设置成员列表 - 避免一次性加载过多用户数据
2. 使用防抖 - 在频繁输入时优化匹配性能
3. 虚拟滚动 - 对于大型用户列表，考虑实现虚拟滚动

🎉 开始使用吧！

Vue-At 让 Vue 项目中的@提及功能实现变得前所未有的简单。无论你是构建社交应用、团队协作工具还是内容管理系统，这个插件都能为你提供专业级的用户提及体验。

现在就安装 Vue-At，为你的 Vue 应用增添这个实用的交互功能吧！✨