在vue中使用v-emoji-picker实现在input光标处插入表情

在vue中使用v-emoji-picker实现在input光标处插入表情

第一步安装

npm i v-emoji-picker --save

第二步引入
在要使用的页面引入 (文档上在main.js里引入,不能用 可能是我姿势不对/手动狗头)

import VEmojiPicker from 'v-emoji-picker'

 components: {
      VEmojiPicker
   }

-----html

  <div class="emoji_box">
     <a-textarea
        id="emojiInput"
        ref="texttemplate"
        v-model="emojitext"
       	:auto-size="{ minRows:6, maxRows: 15 }"
        placeholder="请输入内容"
        allow-clear />
     <div id="exampleInputEmoji">
        <a-button style="font-size:20px" @click="toogleDialogEmoji">😃</a-button>
        <VEmojiPicker v-show="showDialog" labelSearch="Search" lang="pt-BR" @select="selectEmoji" />
     </div>
</div>

----methods

    // 表情输入
      selectEmoji (emoji) {
        var elInput = document.getElementById('emojiInput')//获取输入框元素
        // console.log(elInput);
        var start = elInput.selectionStart // 记录光标开始的位置
        var end = elInput.selectionEnd // 记录选中的字符 最后的字符的位置
        if (start === undefined || end === undefined) return
        var txt = elInput.value
        // 将表情添加到选中的光标位置
        var result =
          txt.substring(0, start) + emoji.data + txt.substring(end)
        elInput.value = result // 赋值给input的value
        // 重置光标位置
        elInput.focus()
        elInput.selectionStart = start + emoji.data.length
        elInput.selectionEnd = start + emoji.data.length
        this.emojitext= result // 赋值(注意这里一定要赋值给表情输入框绑定的那个值)
      },
      //打开表情弹窗
      toogleDialogEmoji () {
        this.showDialog = !this.showDialog
      },

tips:如果样式不对,可以使用/deep/ 或者::v-deep 重置表情框的样式如位置等

-----另外如果遇到选择表情框 显示的表情有一层白色的蒙版 即颜色不鲜艳
/deep/#Emojis {
color: aliceblue;//任意颜色即可 把原有的透明度重置了就行
}