Vue表情输入组件 微信face表情组件

Vue表情输入组件表情输入组件 微信微信face表情组件表情组件

主要为大家详细介绍了Vue表情输入组件，微信face表情组件，具有一定的参考价值，感兴趣的小伙伴们可以参

考一下

VUE表情包输入组件，先来张成品图看看。

年底了没事干，把以前做过的项目中的组件拿出来再复习一下， 先说说思路吧。

注意：注意：

1. 项目是用vue-cli3.0搭建起来的项目， 参考cli3.0官网地址

2.样式是用scss需要安装依赖： npm install node-sass sass-loader -D

<div class="home">

<!-- 页面内容区域 -->

<div :class="faceShow ? 'contentBox contFaceShow' : 'contentBox'">

<ul>

<li v-for="(item,index) in content" :key="index">

<span>{{item}}</span>

</li>

</ul>

</div>

<!-- 输入框区域 -->

<div class="browBox" v-if="faceShow">

<ul>

<li v-for="(item,index) in faceList" :key="index" @click="getBrow(index)">{{item}}</li>

</ul>

</div>

</div>

</template>

JS区域

// 导入JSON格式的表情库

const appData = require("@/assets/emojis.json");

faceShow: false,

getBrowString: "",

content: []

};

},

methods: {

// 表情

faceContent() {

this.faceShow = !this.faceShow;

if (this.faceShow == true) {

},

// 获取用户点击之后的标签 ，存放到输入框内