博客

1. 下载安装组件：

npm install emoji-mart-vue --save

2. 引用组件：

import { Picker } from "emoji-mart-vue"; //引入组件

components : { 
     Picker   //注册组件，不要全局挂载
}；  

3. 页面中使用：

<el-input
id="myInput"
type="textarea"
v-model="content"
rows="5"
placeholder="请输入内容"
maxlength="200"
show-word-limit
></el-input>

//放在输入框后边

<picker :include="['people, smileys']" :showSearch="false" :showPreview="false" :showCategorise="false" @select="addEmoji" />

4. 输入框添加表情：

addEmoji(e) {
      const myInput = document.getElementById("myInput");
      //光标位置
      const startPos = myInput.selectionStart;
      const endPos = myInput.selectionEnd;
      //添加到光标位置
     const emoji = e.native;
     const inputTxt = myInput.value;
     const result = inputTxt.substring(0, startPos) + emoji + inputTxt.substring(endPos);
     myInput.value = result;
     //重新定位光标位置
     myInput.selectionStart = startPos + emoji.length;
     myInput.selectionEnd = startPos + emoji.length;
     myInput.focus();
    //赋值
    this.content = result;
}
            

5. 效果：