表情用法 vue-emoji-picker-custom

安装

npm install  vue-emoji-picker-custom

import { VEmojiPicker } from 'vue-emoji-picker-custom';

components: {VEmojiPicker},

用法

 <el-form-item label="群发内容" prop="content">
          <div class="emoji_box">
            <div id="exampleInputEmoji">
              <a-button style="font-size:20px" @click="toogleDialogEmoji">😃</a-button>
              <VEmojiPicker v-show="showDialog" labelSearch="Search" lang="pt-BR" @select="selectEmoji" />
              <el-input ref="texttemplate"  id="emojiInput"  clearable type="textarea"
                        :rows="2"  autosize   maxlength="800"
                        show-word-limit placeholder="请输入内容" v-model.trim="form.content" style="width: 470px;" />
            </div>
          </div>
 </el-form-item>

    //打开表情弹窗
    toogleDialogEmoji () {
      this.showDialog = !this.showDialog
    },
    selectEmoji(emoji) {
      console.log('8888',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.form.content= result // 赋值(注意这里一定要赋值给表情输入框绑定的那个值)
      console.log(' this.form.content', this.form.content);

    },

官网链接: github vue-emoji-picker-custom