1、下载组件
npm install --save emoji-mart-vue
2、引用组件
import { Picker } from "emoji-mart-vue"; //引入组件
components: { //注册组件,不能全局挂载
Picker
}
3、使用
<el-input id="emojiInput"
v-model="content"
type="textarea"
:autosize="{ minRows: 8, maxRows: 20 }"
style="width: 550px"
size="mini"
placeholder="请输入内容"
></el-input>
//丢在输入框边
<picker :include="['people','Smileys']" :showSearch="false" :showPreview="false" :showCategories="false" @select="addEmoji" />
4、输入变量+表情包
js
addEmoji(e) {
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) + e.native + txt.substring(endPos)
elInput.value = result;// 赋值给input的value
// 重新定义光标位置
elInput.focus();
elInput.selectionStart = startPos + e.native.length;
elInput.selectionEnd = startPos + e.native.length;
this.content = result// 赋值给表单中的的字段
},
5、最后是 css 消除文字
.emoji-mart[data-v-7bc71df8] {
font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
display: -ms-flexbox;
display: flex;
-ms-flex-direction: column;
flex-direction: column;
height: 420px;
color: #ffffff !important;
border: 1px solid #d9d9d9;
border-radius: 5px;
background: #fff;
}
效果