VUE表情包輸入組件，先來張成品圖看看。
年底了沒事干，把以前做過的項目中的組件拿出來再復習一下， 先說說思路吧。
注意：
1. 項目是用vue-cli3.0搭建起來的項目， 參考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地址
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
