# vue2-mention

**Repository Path**: yang-meng1111111/vue2-mention

## Basic Information

- **Project Name**: vue2-mention
- **Description**: 一个实现了@提及的编辑框组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: main
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-06-16
- **Last Updated**: 2024-06-16

## Categories & Tags

**Categories**: Uncategorized

**Tags**: vue2, mention, vue2-mention

## README

## 安装

```
npm i vue2-mention
```

## 注册

在`main.js`中

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



## 使用

```vue
<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：编辑框失去焦点时传递编辑框中的内容