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

<template>
 <div id="publish">
  <!-- 發(fā)布內(nèi)容輸入框，利用Html5的新屬性contenteditable，實現(xiàn)可編輯文本 ，會自動將插入的IMG標(biāo)簽解析-->
  <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="/static/arclist/'+i+'.gif">'); //為表情容器里添加IMG標(biāo)簽，并賦予src值，路徑為表情文件所在路徑
       }
     }
   },// 選擇表情并插入到輸入框
   choice_face:function(e){
     if(e.target.nodeName=="IMG"){
       var choice=e.target;
       var cEle = choice.cloneNode(true); //深度復(fù)制，復(fù)制節(jié)點下面所有的子節(jié)點 ，直接將整個表情的IMG標(biāo)簽復(fù)制，并添加到發(fā)布框的<p></p>里面
       $("p#input_conta").append(cEle);
     }
   },
   // 發(fā)送信息給后臺
   send:function(){
   // 發(fā)送留言
   var text=$("#input_conta").html();  //獲得發(fā)布框的文本內(nèi)容，表情會以整個img標(biāo)簽文本顯示
   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>