输入框显示表情图标-vue篇

1、子组件封装

<template><div><div class="box text edit" :contenteditable="isLiveEdit" v-html="innerText" @input="changeTxt"   placeholder="说的什么.."></div><span class="text-num trsY">{{textNum}}</span><div class="facebox" v-show="faceBoxFlag"><img @click="addFace(`${i}.gif`)" :src="`${gifBaseUrl+i}.gif`" alt="" class="pointer faceItem" v-for="i in 131"></div></div>
</template>

 export default {name:'mContenteditable',props:{commentsValue:{type:String,default:''},faceBoxFlag:{type: Boolean,default: false}},data:function(){return {innerText:this.commentsValue,gifBaseUrl:'http://******/Public/Home/face/', //表情包地址textNum:0,//剩余可编辑字数textNumConfig:200,//字数限制定义isLiveEdit:true}},mounted(){this.textNum = this.textNumConfig - this.innerText.length;},methods:{changeTxt:function(e){let self = this;this.textNum = this.textNumConfig - this.innerText.length;this.innerText = e.currentTarget.innerText;this.$emit('input',this.innerText);//解决父子组件数据双向绑定if (this.textNum<1){this.textNum = 0;//this.Message({type:'error',content:'字数超出限制'});this.innerText = this.innerText.substring(0,this.textNumConfig);}setTimeout(()=>{self.keepLastIndex(e.target)},5)},//光标定位keepLastIndex(obj) {if (window.getSelection) { //ie11 10 9 ff safariobj.focus(); //解决ff不获取焦点无法定位问题var range = window.getSelection(); //创建rangerange.selectAllChildren(obj); //range 选择obj下所有子内容range.collapseToEnd(); //光标移至最后} else if (document.selection) { //ie10 9 8 7 6 5var range = document.selection.createRange(); //创建选择对象range.moveToElementText(obj); //range定位到objrange.collapse(false); //光标移至最后range.select();}},//插入表情addFace(str){let Img = `<img class='text-emoji' name='${str}' src='${this.gifBaseUrl+str}'/>`;  // img是要插入的图片表情let txt = this.innerText;this.innerText = txt + Img ;this.$emit('input',this.innerText);//解决父子组件数据双向绑定},//发送成功 清空输入框 clearData(){this.innerText = '' ;this.$emit('input',this.innerText);//解决父子组件数据双向绑定}},}

模拟placeholder功能：

.text:empty:before{content: attr(placeholder);color:#bbb;}
.text:focus{content:none;}.edit,
.edit * {-webkit-user-select: auto;-webkit-user-modify: read-write;
}

2、父组件调用

<template><div class="pinlunt"><m-contenteditable ref="textarea" :faceBoxFlag="faceBoxFlag" v-model="commentsValue"></m-contenteditable>  <div class="add-face flex"><span @click="faceBoxFlag = !faceBoxFlag"><img src="../assets/images/face.png">添加表情</span><span @click="commentEvent(productionObjInfo.uid)">评论</span></div></div>
</template>

import mContenteditable from '../components/m-contenteditable'export default {components:{mContenteditable },inject:['reload'],props:[],data() {return {commentsValue:'',// 评论内容faceBoxFlag:false,}},methods: {commentEvent(tid,pid,targetItem){ //评论let self = this;if (self.commentsValue === "")   return this.Message({type:'warning',content:"请输入评论"});let param = {// to_uid:to_uid,product_id:product+id ,to_uid:tid,uid:_UID,login_token:_TOKEN,content:self.commentsValue};pid && (param['pid'] = pid);ServerApi.plushProductionCommentsApi(param).then(res=>{if(res.data.status == '0') {if (self.$refs.textarea.clearData) {self.$refs.textarea.clearData();}self.faceBoxFlag = false;self.productionCommentList = [];self.pageIndex = 1;//self.getCommentApi();//评论列表}})},}}

输入框显示表情图标-vue篇相关推荐

android添加文本框代码,Android输入框添加emoje表情图标的实现代码
前言再次写聊天的时候才发现,代码积累是一件非常重要的事情,就如这篇博客的意图其实就是代码积累的目的,其实没什么难度,但是一件很琐碎的事情真的也需要时间去完成和调试,所以,获取你在写一个功能的时候会觉 ...
MUI 图标显示不出来 - 分析篇
MUI 内置小图标无法正常显示,错显示为小矩形 bug截图: 原因及解决办法: mui.css/mui.min.css中关于字体文件.ttf引路路径设置有误,修改相对路径即可: .ttf文件有缺损, ...
android textview显示表情,在Android TextView中显示表情符号/情感图标
我在Android TextView中显示表情符号图标时遇到一些问题首先,我在这里找到了Unicode表情符号图标列表:http : //www.easyapns.com/category/just ...
vue在列表和下拉框中显示icon图标
vue在列表和下拉框中显示icon图标一. 在项目中引入阿里云icon图标二. 在data中定义icon图标列表三. 在下拉框中显示icon图标四. 在列表中显示icon图标五. 在el-c ...
html icon 引入emoji,给自己网站增加Emoji表情图标（可以在百度显示类
百度搜索引擎中能够显示ICO图标,一来说明建站时间比较长,二来可以看得出那站内权重相对不低,但是现在很多新站建立以后都不会出现ICO图标了,包括卢松松博客和我的个人博客都没有出现ICO图标,那么今天我 ...
Android之UI学习篇二：TextVeiw显示表情和跑马灯效果
给大家先看一下效果吧: 几秒后(文字在向左跑动): 以上就是实现图片和文字混排.文字跑马灯的效果实现,接下来看一下代码如何实现吧: MainActivity.java public class And ...
桌面计算机不显示桌面,电脑不显示桌面图标怎么解决
使用电脑时,我们要打开某一软件或文件,通常会直接在桌面找到相应的图标双击打开.但有时莫名其妙的我们电脑不显示桌面图标了,这时想要打开程序或文件就非常麻烦了.那么我们该怎么解决电脑不显示桌面图标的问题呢 ...
输入框插入表情的实现
输入框插入表情的实现 HTML5 在普通的 textarea 中,只能显示普通的文本.如果简单的输入文本,textarea 便足以胜任.但是实际情况往往要复杂得多. 简单版本的插入表情常见的版本一般 ...
Vue全家桶学习笔记_零基础入门到入坑:Vue篇
文章目录前言什么是Vue,什么又是框架完善的准备 Vue 引入 npm 安装 cnpm镜像加速器安装 Vue-Cli脚手架安装 webpack 安装 webpack-cli 安装 axios ...

输入框显示表情图标-vue篇

输入框显示表情图标-vue篇相关推荐

最新文章

热门文章