2019-10-29 Vue-简单的表情组件

开发一个简单的表情插件组件，其包含三个部分：表情图像的json格式对象、表情面板组成样式和点击表情插入文本内容中

首先，定义表情对象包括src和title的JSON格式

表情对象为一个对象数组集合文件face.json

[
   {
   
     "src": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/e3/2018new_weixioa02_org.png",
     "title": "[微笑]"
   },
   {
   
     "src": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/09/2018new_keai_org.png",
     "title": "[可爱]"
   },
   {
   
     "src": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/1e/2018new_taikaixin_org.png",
     "title": "[太开心]"
   },
   {
   
     "src": "http://img.t.sinajs.cn/t4/appstyle/expression/ext/normal/6e/2018new_guzhang_org.png",
     "title": "[鼓掌]"
   }
   ......
]

然后，定义表情组件样式文件index.vue，与face.json在同一目录下

定义表情图片的样式

<div class="scroll-wrapper" @touchmove.prevent ref="faceContent">
  <ul>