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

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

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

注意：

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

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

思路： 页面内容总体分为三块区域（内容区，表情区，输入区），引入json文件表情库渲染到页面，给每个表情绑定点击事件并传递下标，将用户点击过的表情存放到一个数组中，赋值给input标签的value中让其显示先输入框内，然后给 确定 按钮绑定点击事件，用户点击确定按钮将input中的value值赋值给内容区（内容去也要创建一个数组）让其渲染到你要的位置上，这样就完成了表情的渲染和发送。

html区域

<template>
 <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="faceshow ?'box boxfaceshow' : 'box'" ref="heightface">
  <input type="text" v-model="textconent" class="inputcontent">
  <button class="referbut" @click="refercontent">提交</button>
  <button class="facebut" @click="facecontent">表情</button>
 </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");
export default {
 name: "home",
 data() {
 return {
  textconent: "",
  facelist: [],
  faceshow: false,
  getbrowstring: "",
  content: []
 };
 },
 methods: {
 // 表情
 facecontent() {
  this.faceshow = !this.faceshow;
  if (this.faceshow == true) {
  for (let i in appdata) {
   this.facelist.push(appdata[i].char);
  }
  } else {
  this.facelist = [];
  }
 },
 // 获取用户点击之后的标签 ，存放到输入框内
 getbrow(index) {
  for (let i in this.facelist) {
  if (index == i) {
   this.getbrowstring = this.facelist[index];
   this.textconent += this.getbrowstring;
  }
  }
 },
 // 将input的内容渲染到页面上
 refercontent() {
  if (this.textconent == "") return alert("请输入内容");
  // 存入
  this.content.push(this.textconent);
  // 清空input数据
  this.textconent = "";
  // 关闭表情列表
  this.faceshow = false;
 }
 },
};

css区域

<style lang="scss" scoped>
body,
html,
head,
.home {
 width: 100%;
 height: 100%;
 padding: 0px;
 position: relative;
 margin: 0px;
}
.home {
 width: 100%;
 height: 100%;
 .contentbox {
 width: 100%;
 display: flex;
 flex-direction: column;
 justify-content: flex-end;
 text-align: right;
 position: absolute;
 bottom: 60px;
 li {
  list-style: none;
  padding: 4px 10px;
  margin-bottom: 20px;
  span {
  background: #e6e6e6;
  border-radius: 5px;
  padding: 5px;
  }
 }
 }
 .contfaceshow {
 position: absolute;
 bottom: 240px;
 }
 .box {
 width: 100%;
 height: 40px;
 margin: auto;
 position: absolute;
 bottom: 0px;
 .inputcontent {
  position: absolute;
  bottom: 0%;
  left: 0%;
  width: 74%;
  height: 100%;
  border: 1px solid #ccc;
 }
 .referbut {
  position: absolute;
  bottom: 0%;
  right: 2%;
  height: 100%;
  width: 10%;
  border-radius: 5px;
  background: #aaaaff;
  color: #fff;
 }
 .facebut {
  position: absolute;
  bottom: 0;
  right: 13%;
  height: 100%;
  width: 10%;
  border-radius: 5px;
  background: #aaaaff;
  color: #fff;
 }
 }
 .boxfaceshow {
 position: absolute;
 bottom: 200px !important;
 }
 .browbox {
 width: 100%;
 height: 200px;
 background: #e6e6e6;
 position: absolute;
 bottom: 0px;
 overflow: scroll;
 ul {
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  li {
  width: 14%;
  font-size: 26px;
  list-style: none;
  text-align: center;
  }
 }
 }
}
</style>


<style lang="scss">
body,
html,
head {
 width: 100%;
 height: 100%;
 position: relative;
}
#app {
 height: 100%;
}
* {
 padding: 0px;
 margin: 0px;
}
</style>

代码在我的github上：github地址

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。