[Vue功能点分享]使用emoji表情

想要在vue项目中使用emoji表情

首先安装依赖

npm i v-emoji-picker --save

vue页面引入

<el-button type="text" size="mini" @click="showDialog = !showDialog">😃</el-button>
<el-input v-model="text" id="emojiInput"></el-input>
<VEmojiPicker  v-show="showDialog" @select="selectEmoji" />
<el-button type="text" size="mini" @click="log">发送</el-button>


import {VEmojiPicker} from 'v-emoji-picker'

 components: {
      VEmojiPicker
   }
   
 data() {
  return {
    showDialog:false,
    text:''
  }
},  

methods:{
  selectEmoji(emoji) {
    // 选择emoji后调用的函数
    const elInput = document.getElementById('emojiInput');//获取输入框元素,注意id要绑定到输入框上
    const start = elInput.selectionStart; // 记录光标开始的位置
    const end = elInput.selectionEnd; // 记录选中的字符 最后的字符的位置
    if (start === undefined || end === undefined) return
    const txt = elInput.value;
    // 将表情添加到选中的光标位置
    const 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.text= result // 赋值(注意这里一定要赋值给表情输入框绑定的那个值)
  },
  log(){
    console.log(this.text)
  }
}
   

😃