Vue+Element-ui实现emoji表情在光标处添加

前言

开发中遇到产品提的一个小需求，在每个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.欢迎交流！