Vue表情输入组件 微信face表情组件
程序员文章站
2022-08-28 10:02:26
vue表情包输入组件,先来张成品图看看。
年底了没事干,把以前做过的项目中的组件拿出来再复习一下, 先说说思路吧。
注意:
1. 项目是用vue-cli3.0搭建...
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地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。