Vue-At 完全指南：掌握Vue.js中的@提及功能

Vue-At 完全指南：掌握Vue.js中的@提及功能

【免费下载链接】vue-at At.js for Vue. 项目地址: https://gitcode.com/gh_mirrors/vu/vue-at

Vue-At是一个专为Vue.js设计的@提及插件，支持内容可编辑区域和文本输入框，让用户能够轻松实现成员提及功能。无论是Vue 3、Vue 2还是Vue 1项目，都能通过Vue-At快速集成智能提及功能。

🚀 功能探索：揭秘Vue-At的强大能力

Vue-At插件基于At.js核心思想，为Vue.js应用提供完整的@提及解决方案。它采用纯文本实现，不依赖jQuery，不会在DOM中插入额外节点，确保了应用的轻量性和性能。

💡 实战演练：从零构建@提及功能

环境准备与安装配置

首先需要根据你的Vue.js版本选择合适的Vue-At版本：

# Vue 3项目
npm install vue-at@next

# Vue 2项目  
npm install vue-at@2.x

# Vue 1项目
npm install vue-at@1.x

内容可编辑区域集成

在Vue组件中引入并使用Vue-At：

<template>
  <at :members="members">
    <div contenteditable></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 v-model="text"></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', '小浩'],
      text: ''
    }
  }
}
</script>

🔗 生态融合：与主流UI框架完美结合

集成Vuetify组件库

<template>
  <at-ta :members="members">
    <v-textarea v-model="text"></v-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', '小浩'],
      text: ''
    }
  }
}
</script>

集成Element UI组件

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

⚡ 进阶技巧：解锁隐藏的高级功能

自定义提及项模板

通过自定义模板，可以完全控制提及项的显示方式：

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

<script>
import At from 'vue-at'

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

响应式数据绑定

Vue-At支持v-model双向绑定，让数据管理更加便捷：

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

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

跨浏览器兼容性

Vue-At插件经过严格测试，支持Chrome、Firefox、Edge以及IE9到IE11等主流浏览器。

项目构建与部署

项目使用Vue CLI进行构建，支持CommonJS和UMD格式。主要构建脚本包括构建At组件和AtTextarea组件，确保在生产环境中稳定运行。

完整的项目结构和示例代码可以在src目录下找到，包括At.vue、AtTextarea.vue等核心组件文件，以及配套的样式文件和工具函数。

通过Vue-At插件，开发者可以快速为Vue.js应用添加智能@提及功能，提升用户体验和交互效率。

【免费下载链接】vue-at At.js for Vue. 项目地址: https://gitcode.com/gh_mirrors/vu/vue-at