这篇文章主要为大家详细介绍了Vue表情输入组件，微信face表情组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
VUE表情包输入组件，先来张成品图看看。
年底了没事干，把以前做过的项目中的组件拿出来再复习一下， 先说说思路吧。
注意：
1. 项目是用vue-cli3.0搭建起来的项目， 参本文来源gaodai#ma#com搞*!代#%^码网%考cli3.0官网地址
2.样式是用scss需要安装依赖： npm install node-sass sass-loader -D
思路： 页面内容总体分为三块区域（内容区，表情区，输入区），引入JSON文件表情库渲染到页面，给每个表情绑定点击事件并传递下标，将用户点击过的表情存放到一个数组中，赋值给input标签的value中让其显示先输入框内，然后给 确定 按钮绑定点击事件，用户点击确定按钮将input中的value值赋值给内容区（内容去也要创建一个数组）让其渲染到你要的位置上，这样就完成了表情的渲染和发送。
html区域
<div class="home"> <!-- 页面内容区域 --><div> <ul> <li> <span>{{item}}</span></li></ul></div><!-- 输入框区域 --><div> <button class="referBut">提交</button><button class="faceBut">表情</button></div><!-- 表情区域 --><div class="browBox"> <ul> <li>{{item}}</li></ul></div></div>
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区域
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; } } } } body, html, head { width: 100%; height: 100%; position: relative; } #app { height: 100%; } * { padding: 0px; margin: 0px; }
代码在我的github上：github地址
以上就是Vue表情输入组件 微信face表情组件的详细内容，更多请关注gaodaima搞代码网其它相关文章！
搞代码网（gaodaima.com）提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请说明详细缘由并提供版权或权益证明然后发送到邮箱[email protected]，我们会在看到邮件的第一时间内为您处理，或直接联系QQ：872152909。本网站采用BY-NC-SA协议进行授权
转载请注明原文链接：Vue表情输入组件 微信face表情组件
转载请注明原文链接：Vue表情输入组件 微信face表情组件
