vue项目添加emoji表情

安装emoji-mart-vue插件

插件地址： https://github.com/jm-david/emoji-mart-vue

需要注意的细节：

获取光标位置
插入完成后的光标位置，vue的v-model渲染会有一个过程，需要加一个延时再去计算移动光标位置

示例图：

完整代码

<template><div><textarea id="textarea" v-model="content" /><div class="face"><Picker  @select="showEmoji" :i18n="I18N" /></div></div>
</template><script>
import { Picker } from "emoji-mart-vue";const I18N = {search: '搜索',notfound: 'No Emoji Found',categories: {search: '搜索结果',recent: '经常使用',smileys: '表情与情感',people: '人物与身体',nature: '动物与自然',foods: '食物与饮料',activity: '活动',places: '旅行与地理',objects: '物品',symbols: '符号标志',flags: '旗帜',custom: 'Custom',},
}export default {name: 'App',components: {Picker},data() {return {content: '',I18N: I18N}},methods: {// 选择表情showEmoji(emoji) {const str = emoji.nativevar oText = document.getElementById('textarea')var index = this.getCursortPosition(oText)this.$nextTick( () => {this.insert(oText,str,index)})},// 插入表情insert (oText,varstr,index) {var text = this.contentlet startStr = text.substring(0, index)let endStr = text.substring(index, text.length)this.content = startStr + varstr + endStrsetTimeout(() => {this.setCaretPosition(oText, index+2)}, 10);},// 获取光标位置getCursortPosition (obj) {var cursorIndex = 0if (document.selection) {obj.focus()var range = document.selection.createRange()range.moveStart('character', -obj.value.length)cursorIndex = range.text.length} else if (obj.selectionStart || obj.selectionStart == 0) {cursorIndex = obj.selectionStart}return cursorIndex},// 设置光标位置setCaretPosition(ctrl, pos){if(ctrl.setSelectionRange){ctrl.focus();ctrl.setSelectionRange(pos,pos);}else if (ctrl.createTextRange) {var range = ctrl.createTextRange();range.collapse(true);range.moveEnd('character', pos);range.moveStart('character', pos);range.select();}},}
}
</script><style>
textarea{width: 100%;height: 200px;padding: 10px;line-height: 24px;
}
</style>

vue项目添加emoji表情相关推荐

2021-07-14在vue中引入emoji表情
在vue中添加emoji表情过程过程在已经创建的表情button中应用ant design组件: 网址.添加气泡卡片组件在js中引入依赖下面展示一些内联代码片. // 引入安装包和样式 i ...
markdown中添加Emoji表情让文章更有趣味
markdown表情在文章中添加Emoji表情,可以添加文章的趣味性,Emoji使用规则是双::中间加单词查看全文 http://www.taodudu.cc/news/show-4737612. ...
为 VUE 项目添加 PWA 解决发布后刷新报错问题
为 VUE 项目添加 PWA 解决发布后刷新报错问题参考文章: (1)为 VUE 项目添加 PWA 解决发布后刷新报错问题 (2)https://www.cnblogs.com/morang/p/9 ...
微信公众号自定义菜单添加emoji表情图标
微信公众号自定义菜单添加emoji表情图标第一步:打开微信公众平台接口调试工具,点击前往接口调试工具: 第二步:把这段代码 {"button":[{"sub_but ...
Vue+Element-ui实现emoji表情在光标处添加
前言开发中遇到产品提的一个小需求,在每个el-form-item表单项后面添加添加一个可以在文本任意位置输入emoji表情的功能,效果图如下: 解决方案 1.采用element中的 el-popov ...
vue项目添加百度统计
第一步:准备工作 1.使用百度账号登录百度统计平台(没有百度账号先注册一个) https://tongji.baidu.com/web/welcome/login 2.登录后进入管理 >账户管理 ...
Markdown添加emoji表情
编写markdown文档久了,可能会开始考虑,如何才能让markdown文档不再单调? 使用简单的冒号+单词的方式,就能快速添加千款emoji表情,让文档充满活力. 超全的emoji列表参见这个
后台管理系统添加emoji表情
交代下编写环境 : vue + element 使用emoji 首先要注意的是emoji的格式,emoji的编码格式是Unicode格式,数据库储存的格式是utf-8,如果想要兼容Unicode 则需 ...
SpringBoot项目处理emoji表情到mysql
Mysql设置字符集编码,程序设置连接客户端编码来解决emoji表情 emoji表情现在是日常生活中必不可少的存在了,首先我们先了解一下为什么emoji表情不能像普通的字符处理?emoji 其实是 ...
vue项目添加全局水印或某个指定页面水印源码
vue项目的页面添加水印,效果如图 index.vue import watermark from "./watermark"; mounted() {watermark.set( ...

vue项目添加emoji表情

安装emoji-mart-vue插件

需要注意的细节：

完整代码

vue项目添加emoji表情相关推荐

最新文章

热门文章