vue.js評論發(fā)布信息可插入QQ表情功能

<template>
 <div id="publish">
 <!-- 發(fā)布內(nèi)容輸入框，利用Html5的新屬性contenteditable，實現(xiàn)可編輯文本 ，會自動將插入的IMG標簽解析-->
 <div class="publish_container">
 <p contenteditable="true" id="input_conta"></p>
 </div>

 <!-- 表情和發(fā)送-->
 <div class="face_container">
 <!-- 表情Icon，點擊觸發(fā)事件，動態(tài)生成表情并顯示 -->
 <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()>發(fā)送</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>

<script>

export default {
 data () {
 return {
 id:this.$route.query.id,
 top:"",
 }
 },
 methods:{
 make_face:function(){
 $("div#face").show(); //顯示表情容器
 if($("div#face>img").length==0){ //動態(tài)生成表情，如果現(xiàn)在沒有表情則生成
 for(var i=1;i<=75;i++){ //根據(jù)表情文件數(shù)量決定循環(huán)次數(shù)，這里為75個表情
 $("div#face").append('<img src="https://www.gxlcms.com/static/arclist/'+i+'.gif">'); //為表情容器里添加IMG標簽，并賦予src值，路徑為表情文件所在路徑
 }
 }
 },// 選擇表情并插入到輸入框
 choice_face:function(e){
 if(e.target.nodeName=="IMG"){
 var choice=e.target;
 var cEle = choice.cloneNode(true); //深度復(fù)制，復(fù)制節(jié)點下面所有的子節(jié)點 ，直接將整個表情的IMG標簽復(fù)制，并添加到發(fā)布框的<p></p>里面
 $("p#input_conta").append(cEle);
 }
 },
 // 發(fā)送信息給后臺
 send:function(){
 // 發(fā)送留言
 var text=$("#input_conta").html(); //獲得發(fā)布框的文本內(nèi)容，表情會以整個img標簽文本顯示
 console.log(text);
 $("#input_conta").html(""); //清除發(fā)布框的文本內(nèi)容
 $("div#face").hide(); //隱藏表情選擇// 上傳圖片并發(fā)送給后臺
 var out_this=this;
 $("#addTextForm").ajaxSubmit({
 url: url+"/index/text/add",
 type: "post",
 data: {'i_text':text, 
 },
 success: function (data) {
 console.info(data);
 }
 });
 }
 },

}
</script>