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>