前言
开发中遇到产品提的一个小需求,在每个el-form-item表单项后面添加添加一个可以在文本任意位置输入emoji表情的功能,效果图如下:
解决方案
1.采用element中的 el-popover 组件,该组件具备嵌套dom元素的功能,实现emoji表情在按钮附近弹出
2.利用该组件show方法,在显示弹窗时定位标记当前表单项的id值
代码
// html部分
<el-form>
<el-form-item label="表单一" prop="first">
<el-input id="first" v-model="form.first.value"></el-input>
<el-popover trigger="click" @show="showP('first')">
<div>
<div
href="javascript:void(0);"
@click="getEmo(index)"
v-for="(item, index) in faceList"
:key="index">
</div>
</div>
<div slot="reference">
<img src="../assets/emoji-smile.png" />
</div>
</el-popover>
</el-form-item>
<el-form-item label="表单二" prop="second">......</el-form-item>
</el-form>
// js部分
import emojisList from "../handle/emojis" // 引入emoji文件
export default {
data(){
return {
form:{
first:{ key:"", value:"" },
second:{ key:"", value:"" }
},
faceList: [], // emoji表情列表
ele:"" // dom元素id
}
},
mounted(){
// 循环生成表情
for (let i in emojisList) {
this.faceList.push(emojisList[i].emojiChar);
}
},
methods:{
showP(id){
this.ele = id;
},
getEmo(index){
let textArea = document.getElementById(this.ele)
function changeSelectedText(obj, str){
if(window.getSelection) {
textArea.selectionStart += str.length;
textArea.focus();
} else if(document.selection) {
obj.focus();
let sel = document.selection.createRange()
sel.text = str
}
}
changeSelectedText(textArea, this.faceList[index]);
this.ruleForm[this.ele].value = textArea.value;
return;
}
}
}
1.emoji表情数据可在网上搜索
2.本篇博客着重于记录实现功能,样式部分不作记录
3.欢迎交流!