Vue实现表情框选择

实现的效果如下：

首先引入表情相关的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;
	}