实现的效果如下:
首先引入表情相关的json数据(emojis.json)
<script>
const emojData = require("@/assets/emojis.json");
export default {
data() {
return {
faceList: [], //表情数组
faceShow: false,//控制表情区域的显示或者隐藏
}
},
methods:{
//获取所有表情
faceContent() {
//this.faceList = []
this.faceShow = !this.faceShow;
this.faceList = [];
this.$refs.sendinput.foucs;
if (this.faceShow == true) {
for (let i in emojData) {
this.faceList.push(emojData[i].char);
}
} else {
this.faceList = [];
}
},
//表情点击
getBrow(index) {
for (let i in this.faceList) {
if (index == i) {
//this.chatMsg += this.faceList[index];
}
}
},
}
}
</script>
<van-icon name="smile-o" style="margin-right:5px;" @click.stop="faceContent" />
<!-- 表情区域部分 -->
<ul class="facelist" v-show="faceShow">
<li v-for="(item,index) in faceList" :key="index" @click.stop="getBrow(index)">{{item}}</li>
</ul>
css部分
ul{list-style:none;}
.facelist {
display: flex;
width: 100%;
flex-wrap: wrap;
padding: 10px;
background: #fff;
position: fixed;
bottom: 48px;
}