秋在田野里。田野是金飘落的叶子色的。飘落的叶子澄澄的稻谷,远远望去,整个田野就像铺上了一块金色的地毯。
本文实例为大家分享了vue.js评论发布信息可插入QQ表情,供大家参考,具体内容如下
demo例子:
HTML文本内容:
<template> <div id="publish"> <!-- 发布内容输入框,利用Html5的新属性contenteditable,实现可编辑文本 ,会自动将插入的IMG标签解析--> <div class="publish_container"> <p contenteditable="true" id="input_conta"></p> </div> <!-- 表情和发送--> <div class="face_container"> <!-- 表情Icon,点击触发事件,动态生成表情并显示 --> <span @click=make_face() class="make_face"><i class="icon-emoji" ></i></span> <span class="make_img" @click="add_img()"><i class="icon-Pictuer"></i></span> <span class="send" @click=send()>发送</span> <span class="send"><input type="checkbox" name="top" id="top" value="top">本条置顶</span> <!-- 表情容器 ,包裹生成的表情,绑定点击表情事件--> <div id="face" @click=choice_face($event)></div> </div> </div> </template>
js文本内容:
<script> export default { data () { return { id:this.$route.query.id, top:"", } }, methods:{ make_face:function(){ $("div#face").show(); //显示表情容器 if($("div#face>img").length==0){ //动态生成表情,如果现在没有表情则生成 for(var i=1;i<=75;i++){ //根据表情文件数量决定循环次数,这里为75个表情 $("div#face").append('<img src="/static/arclist/'+i+'.gif">'); //为表情容器里添加IMG标签,并赋予src值,路径为表情文件所在路径 } } },// 选择表情并插入到输入框 choice_face:function(e){ if(e.target.nodeName=="IMG"){ var choice=e.target; var cEle = choice.cloneNode(true); //深度复制,复制节点下面所有的子节点 ,直接将整个表情的IMG标签复制,并添加到发布框的<p></p>里面 $("p#input_conta").append(cEle); } }, // 发送信息给后台 send:function(){ // 发送留言 var text=$("#input_conta").html(); //获得发布框的文本内容,表情会以整个img标签文本显示 console.log(text); $("#input_conta").html(""); //清除发布框的文本内容 $("div#face").hide(); //隐藏表情选择// 上传图片并发送给后台 var out_this=this; $("#addTextForm").ajaxSubmit({ url: url+"/index/text/add", type: "post", data: {'i_text':text, }, success: function (data) { console.info(data); } }); } }, } </script>
本文vue.javascript评论发布信息可插入QQ表情功能到此结束。如果你想飞,你就要放下那些会拖累你的东西。没有结局的感情,总要结束;不能拥有的人,总会忘记。人生没有永远的伤痛,再深的痛,伤口总会痊愈。人生没有彩排,好好珍惜此刻,把握生命中的一分一秒。人生没有如果,仅有后果和结果,过去的不再回来,回来的不再完美。小编再次感谢大家对我们的支持!