Vue-At 插件完整使用指南

Vue-At 插件完整使用指南

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

Vue-At 是一个专为 Vue.js 设计的 @ 提及插件，支持内容可编辑区域和文本区域，让用户轻松实现成员提及功能。该插件兼容 Vue 1.x、2.x 和 3.x 版本，是团队协作和社交应用的理想选择。

核心功能介绍

Vue-At 提供了以下核心功能：

• 多版本 Vue 兼容支持（Vue 1.x、2.x、3.x）
• 双模式输入支持（内容可编辑模式和文本区域模式）
• 自定义模板和列表显示
• 第三方 UI 库无缝集成

快速安装

根据您的 Vue 版本选择合适的安装命令：

# Vue 3.x 用户
npm install vue-at@next

# Vue 2.x 用户  
npm install vue-at@2.x

# Vue 1.x 用户
npm install vue-at@1.x

基础使用方法

内容可编辑模式

<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>

文本区域模式

<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>

高级功能配置

自定义模板

您可以通过 slot 插槽自定义提及项的显示方式：

<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: 'https://randomuser.me/api/portraits/men/2.jpg'
        },
        {
          name: 'grace carroll',
          avatar: 'https://randomuser.me/api/portraits/women/3.jpg'
        }
      ]
    }
  }
}
</script>

使用 v-model（推荐）

对于内容可编辑区域，使用 <at v-model:value="v">：

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

对于文本区域，可以使用 <at-ta v-model:value="v"> 或 <textarea v-model="v">：

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

第三方库集成

与 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>

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

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

UMD 支持

Vue-At 也支持通过 UMD 方式引入：

<!-- Vue 3 用户 -->
<script src="//unpkg.com/vue@3"></script>
<script src="//unpkg.com/vue-at@next/dist/vue-at.umd.js"></script>
<script src="//unpkg.com/vue-at@next/dist/vue-at-textarea.umd.js"></script>

<div id="app">
  <at v-model:value="html">
    <div contenteditable></div>
  </at>
  <at-textarea>
    <textarea v-model="text"></textarea>
  </at-textarea>
</div>

<script>
Vue.createApp({
  components: { At, AtTextarea },
  // 组件配置
}).mount('#app')
</script>

样式自定义

您可以通过 CSS 自定义提及列表的样式：

#app .atwho-view { 
  /* 自定义样式 */
}

#app .atwho-ul { 
  /* 自定义样式 */
}

#app .atwho-li img {
  /* 头像样式 */
}

#app .atwho-li span {
  /* 文字样式 */
}

通过本指南，您将能够快速掌握 Vue-At 的核心用法，为您的 Vue 项目添加强大的 @ 提及功能。

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