Vue表情輸入組件微信face表情組件

更新時間：2021年06月29日 09:53:05 作者：王小磊~勿忘初心

這篇文章主要為大家詳細介紹了Vue表情輸入組件，微信face表情組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下

VUE表情包輸入組件，先來張成品圖看看。

年底了沒事干，把以前做過的項目中的組件拿出來再復習一下，先說說思路吧。

注意：

1. 項目是用vue-cli3.0搭建起來的項目，參考cli3.0官網地址

2.樣式是用scss需要安裝依賴： npm install node-sass sass-loader -D

思路： 頁面內容總體分為三塊區(qū)域（內容區(qū)，表情區(qū)，輸入區(qū)），引入JSON文件表情庫渲染到頁面，給每個表情綁定點擊事件并傳遞下標，將用戶點擊過的表情存放到一個數組中，賦值給input標簽的value中讓其顯示先輸入框內，然后給確定按鈕綁定點擊事件，用戶點擊確定按鈕將input中的value值賦值給內容區(qū)（內容去也要創(chuàng)建一個數組）讓其渲染到你要的位置上，這樣就完成了表情的渲染和發(fā)送。

html區(qū)域

<template>
 <div class="home">
 <!-- 頁面內容區(qū)域 -->
 <div :class="faceShow ? 'contentBox contFaceShow' : 'contentBox'">
  <ul>
  <li v-for="(item,index) in content" :key="index">
   <span>{{item}}</span>
  </li>
  </ul>
 </div>
 <!-- 輸入框區(qū)域 -->
 <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>
 <!-- 表情區(qū)域 -->
 <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區(qū)域

// 導入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區(qū)域

<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地址

以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: