@kyfe/tic-at-input

• 安装

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 选人页面	输入框内已@的人员数量