vue实现文字表情同时输入的方法

在我们使用聊天工具进行聊天的时候经常会用到表情符号,有时我们会需要将文字与表情混输,本文就来为大家介绍一下使用vue实现文字表情混输的方法。

实现思路

利用div的contenteditable属性,让div可编辑

绑定ref属性,用于操作输入框元素

图片点击时,获取图片地址,使用require转换图片地址

创建img标签,赋值转换好的图片地址

从refs对象中获取到输入框元素,赋值创建好的img标签

实现过程

声明div可编辑,监听回车键事件,关闭拼写检查,绑定ref方便获取当前元素

<div class="input-panel" ref="msgInputContainer" @keydown.enter.exact="sendMessage($event)"
     contenteditable="true" spellcheck="false"></div>

表情输入框绑定对应的事件

<div class="item-panel" v-for="item in this.emojiList" :key="item.info">
    <img :src="require(`../assets/img/emoji/${item.src}`)" :alt="item.info"
         @mouseover="emojiConversion($event,'over',item.src,item.hover,item.info)"
         @mouseleave="emojiConversion($event,'leave',item.src,item.hover,item.info)"
         @click="emojiConversion($event,'click',item.src,item.hover,item.info)">
</div>

实现表情框图片点击事件

emojiConversion: function (event, status, path, hoverPath, info) {
    if (status === "over") {
        event.target.src = require(`../assets/img/emoji/${hoverPath}`);
    } else if (status === "click") {
        // 表情输入
        const imgSrc = require(`../assets/img/emoji/${hoverPath}`);
         /**
         * 不推荐的写法:
         *   无法获取焦点
         *   无法在当前焦点的位置插入元素
         */
        // const imgTag = document.createElement("img");
        // imgTag.src = imgSrc;
        // imgTag.alt = info;
        // this.$refs.msgInputContainer.appendChild(imgTag);
        
         /**
         * 推荐使用document暴露的execCommand 方法来操作此处
         *   可以在当前焦点处插入元素
         *   感谢评论区掘友的建议
         */
        const imgTag = `<img src="${imgSrc}" width="28" height="28" alt="${info}">`;
        document.execCommand("insertHTML", false, imgTag);
    } else {
        event.target.src = require(`../assets/img/emoji/${path}`);
    }
}

踩坑记录

直接使用append()方法

一直用JQuery,类似的需求直接append,以为是js提供的方法,结果这里直接使用,答案很明显,直接将DOM字符串插入了输入框里

1.jpg

手动实现字符串转dom

2.jpg

3.jpg

4.jpg

正确的实现方法

创建DOM字符串,使用document暴露的execCommand方法来插入创建好的DOM字符串。

不过execCommand的兼容性欠佳,如果遇到没反应的情况,是你的浏览器不支持此api。

5.jpg

如果考虑兼容性问题可使用文中提到的另一种写法

    // const imgTag = document.createElement("img");
    // imgTag.src = imgSrc;
    // imgTag.alt = info;
    // this.$refs.msgInputContainer.appendChild(imgTag);

项目地址:https://github.com/likaia/chat-system

更多前端开发学习知识,请关注HTML中文网

以上就是vue实现文字表情同时输入的方法的详细内容,更多请关注web前端其它相关文章!

赞(0) 打赏
未经允许不得转载:web前端首页 » Vue.js 教程

评论 抢沙发

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址

前端开发相关广告投放 更专业 更精准

联系我们

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

微信扫一扫打赏