输入框显示表情图标-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 safari
                    obj.focus(); //解决ff不获取焦点无法定位问题
                    var range = window.getSelection(); //创建range
                    range.selectAllChildren(obj); //range 选择obj下所有子内容
                    range.collapseToEnd(); //光标移至最后
                } else if (document.selection) { //ie10 9 8 7 6 5
                    var range = document.selection.createRange(); //创建选择对象
                    range.moveToElementText(obj); //range定位到obj
                    range.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();//评论列表
                    }
                })
            },
        }
        
}