VUE emoticon input component, let’s take a look at the finished product. At the end of the year, there is nothing to do. Take out the components in the projects you have done before and review them again. Let’s talk about ideas first. Note: 1. The project is built with VUE-CLI3.0, please refer to cli3.0 official website address 2. NPM install node-sass sass-loader -d The page content is generally divided into three areas (content area, expression area and input area). The expression library of JSON file is introduced to render the page, and click events are bound to each expression and subscripts are transferred. The expressions clicked by the user are stored in an array and assigned to the value of the input label to display them in the input box first. Then bind the “Ok” button to a click event. The user clicks “OK” and assigns the value of the input to the content area (which also creates an array) to render it to the desired location, thus completing the rendering and sending of the expression. HTML section
JS area // import JSON format emoticon library 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.char); } } else { this.faceList = []; }}, // get the tag after the user clicks, GetBrow (index) {for (let I in this.facelist) {if (index == I) {this.getBrowString = this.facelist [index]; this.textConent += this.getBrowString; ReferContent () {if (this.textconent == “”) return alert(” please input the content “); / / in this content. push (enclosing textConent); // Empty input data. this.textConent = “”; // Close the emoticon list this.faceShow = false; }}};