安装

npm i vue2-mention

注册

在main.js中

import vue2Mention from 'vue2-mention.common.js'
import 'vue2-mention/lib/vue2-mention.css'
Vue.use(vue2Mention)

使用

<template>
  <div>
    <vue2-mention :options="options" />
    <button @click="handleSubmit">提交</button>
  </div>
</template>

<script>
import xss from 'xss'
export default {
  name:'App',
  data() {
    return {
      submitContent: '',
      options: {
        style: {
          width: '900px',
          height: '200px'
        },
        defaultValue: '',
        originSelectList: [
          {
            id: 1,
            name: '章三1'
          },
          {
            id: 2,
            name: '里斯2'
          },
          {
            id: 3,
            name: '王二3'
          },
          {
            id: 11,
            name: '章三11'
          },
          {
            id: 22,
            name: '里斯22'
          },
          {
            id: 33,
            name: '王二33'
          }
        ],
        trigger: '@',
        templateKey: 'id',
        templateValue: 'name',
        selectTemplate: (item) => {
          return `<span contenteditable="false" data-${this.options.templateKey}=${
            item[this.options.templateKey]
          }> ${this.options.trigger}${item[this.options.templateValue]}</span>`
        },
        lookupTemplate: 'name', // 根据name匹配输入值，lookupTemplate只能是originSelectList中某对象的某个字符串字段

        noMatchDesc: '暂无数据啦',
        primaryColor: '',
        fontColor: '',
        getItem: (item) => {
          console.log(item)
        },
        getKey: (key) => {
          console.log(key)
        },
        getContent: (val) => {
          this.submitContent = this.getSafeHtml(val)
        }
      }
    }
  },
  methods: {
    // 提交内容
    handleSubmit() {
      console.log(this.submitContent)
    },
    getSafeHtml(html) {
      const whiteList = xss.whiteList
      whiteList.span.push('contenteditable', 'data-id')
      const options = {
        whiteList: whiteList
      }
      return xss(html, options)
    }
  }
}
</script>

<style></style>

• options：所有的配置项
  • style：编辑框的样式
  • defaultValue：默认值
  • originSelectList：可供选择的数组
  • trigger：触发字符
  • templateKey：id
  • templateValue：name
  • selectTemplate：模版
  • lookupTemplate：搜索匹配字段
  • noMatchDesc：匹配不到时的展示内容
  • primaryColor：主题色，默认 #5a9cf8
  • fontColor：字体颜色，默认 #252933
  • getItem：选中时触发，参数为所选item
  • getKey：点击@项时传递id值
  • getContent：编辑框失去焦点时传递编辑框中的内容