vue 获取input光标位置，并在光标位置候面添加选中得表情——有效果图

1.定义一个input标签，使用id选择

// id选择 -> 'emojiInput'
<el-input id="emojiInput" v-model.trim="model.introduction" type="textarea" placeholder="介绍一下这个话题... ..."></el-input>
  <span style="cursor: pointer" @click="showEmojis">
   <el-tag :type="this.isShowEmoji === 0 ? 'success' : 'danger'" size="medium">?</el-tag>
</span><br/>
// vue 中一个表情得控件
<VEmojiPicker
  v-if="this.isShowEmoji === 1"
   :pack="pack"
   labelSearch="Pesquisar..."
   @select="selectEmoji"  // 选中事件
   :continuousList="true"
 />

2.选中表情后事件的函数

selectEmoji(emoji) {
      var elInput = document.getElementById('emojiInput'); //根据id选择器选中对象
      var startPos = elInput.selectionStart;// input 第0个字符到选中的字符
      var endPos = elInput.selectionEnd;// 选中的字符到最后的字符
      if (startPos === undefined || endPos === undefined) return
      var txt = elInput.value;
      // 将表情添加到选中的光标位置
      var result = txt.substring(0, startPos) + emoji.emoji + txt.substring(endPos)
      elInput.value = result;// 赋值给input的value
      // 重新定义光标位置
      elInput.focus();
      elInput.selectionStart = startPos + emoji.emoji.length;
      elInput.selectionEnd = startPos + emoji.emoji.length;
      this.model.introduction = result// 赋值给表单中的的字段
    }

3.效果图

4. 其实输入法可以直接使用 这个功能完全不用开发

a