• 安装

npm i @kyfe/tic-at-input

• 在项目中引入

import ticAtInput from '@kyfe/tic-at-input'
Vue.use(ticAtInput)

• 使用示例

<tic-at-input
  v-model="content"
  ref="atInput"
  @focus="handelFocus"
  @blur="handelBlur"
  @input="handelInput"
  @openSelectAtPersonPage="openSelectAtPersonPage"
  placeholder="请输入"
  :richInputLength.sync="richInputLength"
  :maxLength="300"
/>

• 操作 at 人输入框

// 设置输入框内容
this.content = '需回显的内容'
this.$refs.atInput.setHtmlContent('需回显的内容')

/**
 * @description 获取选中的AT人员,并设置至输入框
 * @param {Array} userList 选中的AT人员列表 (数据结构：[{employeeNumber, employeeName}])
 */
this.$refs.atInput.setAtPersonList(userList)

/**
 * @description 将自定义标识文本（$_hl{139102, 小明}）转为at标签（实际html标签）
 * @param {String} content
 * @param {Boolean} isQuillUse 是否在quill富文本使用（默认是, ps:不在quill使用时需转成完整的html）
 * @returns {String}
 */
this.$refs.atInput.strTranslateAt()

/**
 * @description 将at标签（实际html标签）转化为自定义标识文本（$_hl{139102, 小明}）
 * @param {String} content
 * @returns {String}
 */
this.$refs.atInput.atTranslateStr()

• 参数说明

| 参数名 | 说明 | 类型 | 默认值 | | --------------- | :--------------: | -----: | -----: | | value / v-model | 绑定值 | String | - | | richInputLength | 富文本输入框字数 | Number | - | | maxLength | 字数限制 | Number | - |

• 事件

| 事件名 | 说明 | 回调参数 | | ---------------------- | :----------------------: | --------------------: | | focus | 富文本输入框聚焦事件 | - | | blur | 富文本输入框失去焦点事件 | - | | input | 富文本输入框 input 事件 | - | | openSelectAtPersonPage | 打开 AT 选人页面 | 输入框内已@的人员数量 |