VUE表情包输入组件,先来张成品图看看。
年底了没事干,把以前做过的项目中的组件拿出来再复习一下, 先说说思路吧。
注意:
1. 项目是用vue-cli3.0搭建起来的项目, 参考cli3.0官网地址
2.样式是用scss需要安装依赖: npm install node-sass sass-loader -D
思路: 页面内容总体分为三块区域(内容区,表情区,输入区),引入JSON文件表情库渲染到页面,给每个表情绑定点击事件并传递下标,将用户点击过的表情存放到一个数组中,赋值给input标签的value中让其显示先输入框内,然后给 确定 按钮绑定点击事件,用户点击确定按钮将input中的value值赋值给内容区(内容去也要创建一个数组)让其渲染到你要的位置上,这样就完成了表情的渲染和发送。
html区域
- {{item}}
- {{item}}
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区域
代码在我的github上:github地址
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。