【亲测免费】 Vue-At 使用教程

1、项目介绍

Vue-At 是一个用于 Vue.js 的 @ 提及插件，支持内容可编辑（contenteditable）和文本区域（textarea）。它允许用户在输入时通过 @ 符号提及成员，并提供自定义模板和列表的功能。Vue-At 支持 Vue 1.x、2.x 和 3.x 版本。

2、项目快速启动

安装

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

示例代码

内容可编辑（contenteditable）

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

3、应用案例和最佳实践

自定义模板

你可以自定义提及项的显示模板：

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

与第三方库集成

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>

4、典型生态项目

Vue-At 可以与其他 Vue 生态项目集成，例如：

• Vuetify: 一个 Material Design 风格的 Vue 组件库。
• Element-UI: 一个基于 Vue