vue 实现点击插入输入框_Vue中制作可以插入emoji表情的聊天输入框组件

一般在网页中见到的文本输入框的添加表情功能都是在用户选定表情后, 在文本域中插入特定的字符代表一个表情, 例如:smile代表一个微笑, 作为用户的我, 体验起来就很不舒适, 我就喜欢QQ聊天框这种, 能够实时能够看到表情在输入框中被渲染出来的效果, 所以在我自己写项目的时候, 直接就把这个功能实现了, 下面讲解我是如何在Vue项目中实现文本域预览emoji表情这个功能的.

Emoji表情库

巧妇难为无米之炊, 造这个轮子第一步就是需要找到很多emoji表情, 不然该如何下手呢?我找到了这个网站, 非常给力, 拥有所有平台实现emoji表情以及对应的unicode编码, 传送门

template

在模板中使用v-for将emoji渲染出来, 我没有使用textarea标签, 是因为textarea不能自适应高度, 如果要自适应高度, 又需要一个轮子, 所以干脆直接使用div的contenteditable属性, 来模拟一个textarea好了

{ {v}}

script

主要问题在于如何在点击每个emoji表情字符时, 在文本域中光标所在位置插入相应的emoji字符, 以及插入字符后, 如何将光标定位正确, addEmoji就是我的实现方法, 详细的注释在每行都写了, 没有太大难度

export default {

data() {

return {

emoji_show: false,

emoji: [&#