终于把表情包的功能实现了😁,网上很多用本地图库、雪碧图之类的,愣是没找到几个适合我的解决方案,于是从amio/emoji.json上面找了一个JSON文件,然后简单实现了自己聊天系统上面的一个默认表情功能。
引入JSON文件
const appData = require("../static/utils/emoji.json");
Code
template
表情框组件,通过slot插槽按钮触发显示;输入框是一个textarea,我们要把点击选择的表情插入到textarea光标对应的位置之后。
<div class="chatIcon">
<el-popover placement="top-start" width="400" trigger="click" class="emoBox">
<div class="emotionList">
<a href="javascript:void(0);" @click="getEmo(index)" v-for="(item,index) in faceList" :key="index" class="emotionItem">{
{
item}}</a>
</div>
<el-button
class="emotionSelect"
icon="iconfont icon-biaoqing"
slot="reference"
></el-button>
</el-popover>
</div>
<el-input
v-model="textarea"
class="chatText"
resize="none"
type="textarea"
id='textarea'
rows="5"
@keyup.enter.native="sendInfo"
></el-input>
css
由于el-popover比较特殊,需要全局设置el-popover样式,并防止污染全局。
<style lang="scss">
/* el-popover是和app同级的,所以scoped的局部属性设置了无效 */
/* 需要设置全局style */
.el-popover{
height:200px;
width:400px;
overflow: scroll;
overflow-x:auto;
}
</style>
<style scoped>
.chatIcon {
padding: 0 10px;
font-size: 25px;
}
.emotionList{
display: flex;
flex-wrap: wrap;
padding:5px;
}
.emotionItem{
width:10%;
font-size:20px;
text-align:center;
}
/*包含以下四种的链接*/
.emotionItem {
text-decoration: none;
}
/*正常的未被访问过的链接*/
.emotionItem:link {
text-decoration: none;
}
/*已经访问过的链接*/
.emotionItem:visited {
text-decoration: none;
}
/*鼠标划过(停留)的链接*/
.emotionItem:hover {
text