vue输入框添加表情

1、下载组件

npm install --save emoji-mart-vue

2、引用组件

import { Picker } from "emoji-mart-vue"; //引入组件components: { //注册组件，不能全局挂载Picker}

3、使用

<el-input  id="emojiInput" v-model="content"type="textarea":autosize="{ minRows: 8, maxRows: 20 }"style="width: 550px"size="mini"placeholder="请输入内容"></el-input>
//丢在输入框边<picker :include="['people','Smileys']" :showSearch="false" :showPreview="false" :showCategories="false" @select="addEmoji" />

4、输入变量+表情包

jsaddEmoji(e) {var elInput = document.getElementById('emojiInput'); //根据id选择器选中对象var startPos = elInput.selectionStart;// input 第0个字符到选中的字符var endPos = elInput.selectionEnd;// 选中的字符到最后的字符if (startPos === undefined || endPos === undefined) returnvar txt = elInput.value;// 将表情添加到选中的光标位置var result = txt.substring(0, startPos) + e.native + txt.substring(endPos)elInput.value = result;// 赋值给input的value// 重新定义光标位置elInput.focus();elInput.selectionStart = startPos + e.native.length;elInput.selectionEnd = startPos + e.native.length;this.content  = result// 赋值给表单中的的字段},

5、最后是 css 消除文字

.emoji-mart[data-v-7bc71df8] {font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;display: -ms-flexbox;display: flex;-ms-flex-direction: column;flex-direction: column;height: 420px;color: #ffffff !important;border: 1px solid #d9d9d9;border-radius: 5px;background: #fff;
}

效果

vue输入框添加表情相关推荐

vue输入框禁止输入表情的实现方法
在开发的功能交付测试的时候,测试提出来文本框不能输入表情的bug(这也算一个bug?哪位大神会进行这样的反人类操作啊),说归说,既然提出来了,那咱还得改不是,具体代码如下所示: 首先声明一个输入框: ...
输入框显示表情图标-vue篇
1.子组件封装 <template><div><div class="box text edit" :contenteditable="is ...
html如何实现表情加文字发布,vue实现文字表情同时输入的方法
在我们使用聊天工具进行聊天的时候经常会用到表情符号,有时我们会需要将文字与表情混输,本文就来为大家介绍一下使用vue实现文字表情混输的方法. 实现思路利用div的contenteditable属性, ...
输入框插入表情的实现
输入框插入表情的实现 HTML5 在普通的 textarea 中,只能显示普通的文本.如果简单的输入文本,textarea 便足以胜任.但是实际情况往往要复杂得多. 简单版本的插入表情常见的版本一般 ...
基与Vue的emoji表情使用 --- emoji-vue的使用和bug修改
介绍最近的项目用到了表情包,咱们以前项目有用到emoji-vue.我就直接拿来用了.使用过程中真的一言难尽啊~~~~~ 先附上一张这个插件在Vue中使用的列子.可以清楚的看到一个比较重要的方法onI ...
VUE 框架添加全局公共方法 , 保留小数点后两位
在main.js 里面给Vue对象添加方法. 来一个示例代码: import Vue from 'vue' import App from './App'Vue.prototype.num_to_st ...
为 VUE 项目添加 PWA 解决发布后刷新报错问题
为 VUE 项目添加 PWA 解决发布后刷新报错问题参考文章: (1)为 VUE 项目添加 PWA 解决发布后刷新报错问题 (2)https://www.cnblogs.com/morang/p/9 ...
vue动态设置文字布局方式_详解Vue动态添加模板的几种方法
动态添加模板需要收集原始数据的页面,这个时候我们需要很多原始数据收集模板,下面给大家详解Vue 动态添加模板的几种方法,希望对你学习这方面知识有所帮助. 通常我们会在组件里的 template 属性定 ...
php开发添加表情功能,WordPress网站评论区如何实现添加表情包功能？
做网站过程中,可以给自己的网站添加评论框,供用户评论.默认情况下,Wordpress网站评论框是没有添加表情功能的,那么WordPress网站评论区如何实现添加表情包功能?今天我们介绍一下如何给自己的 ...

vue输入框添加表情

vue输入框添加表情相关推荐

最新文章

热门文章