本文实例为大家分享了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表情功能