Vue中怎么实现一个表情输入组件
这篇文章将为大家详细讲解有关Vue中怎么实现一个表情输入组件,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。
如东网站制作公司哪家好,找创新互联建站!从网页设计、网站建设、微信开发、APP开发、响应式网站建设等网站项目制作,到程序开发,运营维护。创新互联建站成立与2013年到现在10年的时间,我们拥有了丰富的建站经验和运维经验,来保证我们的工作的顺利进行。专注于网站建设就选创新互联建站。
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区域
关于Vue中怎么实现一个表情输入组件就分享到这里了,希望以上内容可以对大家有一定的帮助,可以学到更多知识。如果觉得文章不错,可以把它分享出去让更多的人看到。
网页题目:Vue中怎么实现一个表情输入组件
当前网址:http://scyanting.com/article/gdpdes.html