vue.js评论发布信息可插入QQ表情功能

  

本文实例为大家分享了vue.js评论发布信息可插入QQ表情,供大家参考,具体内容如下

  

演示例子:

  

,  vue.js评论发布信息可插入QQ表情功能

  

HTML文本内容:

        & lt; template>   & lt; div id=胺⒉肌北?   & lt; !——发布内容输入框,利用Html5的新属性contenteditable,实现可编辑文本,会自动将插入的IMG标签解析——比;   & lt; div类=皃ublish_container”比;   & lt; p contenteditable=" true " id=" input_conta祝辞& lt;/p>   & lt;/div>      & lt; !——表情和发送——比;   & lt; div类=癴ace_container”比;   & lt; !——表情图标,点击触发事件,动态生成表情并显示——比;   & lt;跨越@click=make_face()类=癿ake_face祝辞& lt;我类=癷con-emoji”祝辞& lt;/i> & lt;/span>   & lt;跨类=癿ake_img @click”=癮dd_img()“祝辞& lt;我类=癷con-Pictuer祝辞& lt;/i> & lt;/span>   & lt;跨类="发送" @click=发送()在发送& lt;/span>   & lt;跨类="发送"祝辞& lt;输入类型=案囱】颉泵?岸ゼ丁眎d=岸ゼ丁眝alue=" https://www.yisu.com/zixun/top "在本条置顶& lt;/span>   & lt; !——表情容器,包裹生成的表情,绑定点击表情事件——比;   & lt; div id=懊孀印盄click=choice_face(事件)美元祝辞& lt;/div>   & lt;/div>   & lt;/div>      & lt;/template>         之前      

js文本内容:

        & lt; script>      出口默认{   数据(){   返回{   id: route.query.id美元,   前:“”,   }   },   方法:{   make_face:函数(){   $ (" div #脸”),告诉();//显示表情容器   如果($ (" div # face> img ") . length==0){//动态生成表情,如果现在没有表情则生成   (var i=1; i<=75;我+ +){//根据表情文件数量决定循环次数,这里为75个表情   $ (" div #脸”).append (' & lt; img src=" https://www.yisu.com/static/arclist/+我+ gif”在“);//为表情容器里添加IMG标签,并赋予src值,路径为表情文件所在路径   }   }   },//选择表情并插入到输入框   choice_face:函数(e) {   如果(e.target.nodeName==IMG) {=e。target var的选择;   var疝=choice.cloneNode(真正的);//深度复制,复制节点下面所有的子节点,直接将整个表情的IMG标签复制,并添加到发布框的& lt; p> & lt;/p>里面   $ (" # input_conta”页).append(肿物);   }   },//发送信息给后台   发送:函数(){//发送留的言   var文本=$ (" # input_conta ") . html ();//获得发布框的文本内容,表情会以整个img标签文本显示   console.log(文本);   $ (" # input_conta ") . html (" ");//清除发布框的文本内容   $ (" div #脸”)hide ();//隐藏表情选择//上传图片并发送给后台   var out_this=;   $ (" # addTextForm ") .ajaxSubmit ({   url: url +“/索引/文本/添加”,   类型:“文章”,   数据:{“i_text”:文本,   },   成功:功能(数据){   console.info(数据);   }   });   }   },      }   & lt;/script>   之前      

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。

vue.js评论发布信息可插入QQ表情功能