vue实现文字表情同时输入的方法
时间:2022-07-23
本文章向大家介绍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字符串插入了输入框里
手动实现字符串转dom
正确的实现方法
创建DOM字符串,使用document暴露的execCommand方法来插入创建好的DOM字符串。
不过execCommand的兼容性欠佳,如果遇到没反应的情况,是你的浏览器不支持此api。
如果考虑兼容性问题可使用文中提到的另一种写法
// const imgTag = document.createElement("img");
// imgTag.src = imgSrc;
// imgTag.alt = info;
// this.$refs.msgInputContainer.appendChild(imgTag);
- 51 Nod 1028 大数乘法 V2【Java大数乱搞】
- Gym 100952J&&2015 HIAST Collegiate Programming Contest J. Polygons Intersection【计算几何求解两个凸多边形的相交面积板子题
- Windows下Cygwin可以使用哪些Linux命令
- Codeforces Round #426 (Div. 2)【A.枚举,B.思维,C,二分+数学】
- Cygwin,打造你的Windows下Linux环境
- “玲珑杯”ACM比赛 Round #19题解&源码【A,规律,B,二分,C,牛顿迭代法,D,平衡树,E,概率dp】
- 2017 Multi-University Training Contest - Team 1 1003&&HDU 6035 Colorful Tree【树形dp】
- BZOJ 1041: [HAOI2008]圆上的整点【数论,解方程】
- POJ 1655 Balancing Act【树的重心】
- 2017 Multi-University Training Contest - Team 1 1006&&HDU 6038 Function【DFS+数论】
- 2017 Multi-University Training Contest - Team 1 1002&&HDU 6034 Balala Power!【字符串,贪心+排序】
- POJ 3662 Telephone Lines【Dijkstra最短路+二分求解】
- 洛谷 P1177 【模板】快速排序【13种排序模版】
- 一步一步深入理解Dijkstra算法
- JavaScript 教程
- JavaScript 编辑工具
- JavaScript 与HTML
- JavaScript 与Java
- JavaScript 数据结构
- JavaScript 基本数据类型
- JavaScript 特殊数据类型
- JavaScript 运算符
- JavaScript typeof 运算符
- JavaScript 表达式
- JavaScript 类型转换
- JavaScript 基本语法
- JavaScript 注释
- Javascript 基本处理流程
- Javascript 选择结构
- Javascript if 语句
- Javascript if 语句的嵌套
- Javascript switch 语句
- Javascript 循环结构
- Javascript 循环结构实例
- Javascript 跳转语句
- Javascript 控制语句总结
- Javascript 函数介绍
- Javascript 函数的定义
- Javascript 函数调用
- Javascript 几种特殊的函数
- JavaScript 内置函数简介
- Javascript eval() 函数
- Javascript isFinite() 函数
- Javascript isNaN() 函数
- parseInt() 与 parseFloat()
- escape() 与 unescape()
- Javascript 字符串介绍
- Javascript length属性
- javascript 字符串函数
- Javascript 日期对象简介
- Javascript 日期对象用途
- Date 对象属性和方法
- Javascript 数组是什么
- Javascript 创建数组
- Javascript 数组赋值与取值
- Javascript 数组属性和方法
- 前端知识复习(一)
- Powershell运行脚本报错:此系统上禁止运行脚本
- git rebase解决合并冲突
- npm相关操作
- Angular html property的值如何被更新的
- Centos 7 使用mailx发送邮件
- Centos 7 备份MySQL
- Centos 7 备份MySQL/MongoDB并发邮件脚本
- Nginx启动报错:sbin/nginx: error while loading shared libraries: libpcre.so.1: cannot open shared object
- 有赞美业店铺装修前端解决方案
- nginx部署react项目
- Golang 标准库 限流器 time/rate 设计与实现
- Node搭建简易的UDP服务器
- cordova run android 下载gradle报timeout
- How we redesign the NSQ-NSQ重塑之客户端