Vue. js comments publishing information the QQ emoticons function can be inserted, and vue. js publishing information

Vue. js comments publishing information the QQ emoticons function can be inserted, and vue. js publishing information

Examples of this article share with you the vue. js comments that can be inserted with QQ expressions for your reference. The specific content is as follows:

Demo example:

 

HTML text content:

<Template> <div id = "publish"> <! -- Publish content input box, which uses the new attribute contenteditable of Html5 to implement editable text, the inserted IMG tag is automatically parsed --> <div class = "publish_container"> <p contenteditable = "true" id = "input_conta"> </p> </div> <! -- Expression and sending --> <div class = "face_container"> <! -- Emoticon Icon: click the trigger event to dynamically generate and display the emoticon --> <span @ click = make_face () class = "make_face"> <I class = "icon-emoji"> </I> </span> <span class = "make_img" @ click = "add_img () "> <I class =" icon-Pictuer "> </I> </span> <span class =" send "@ click = send ()> send </span> <span class = "send"> <input type = "checkbox" name = "top" id = "top" value = "top"> top </ span> <! -- Emoticons container, the emoticons generated by the package, and the click emoticons events --> <div id = "face" @ click = choice_face ($ event)> </div> </template>

Js text content:

<Script> export default {data () {return {id: this. $ route. query. id, top: "" ,}}, methods: {make_face: function () {$ ("div # face "). show (); // display the emoticons container if ($ ("div # face> img "). length = 0) {// dynamically generate an emoticon. If no emoticon is present, generate for (var I = 1; I <= 75; I ++) {// The number of cycles is determined based on the number of emoticon files. Here, there are 75 emoticon $ ("div # face "). append (''); // Add the IMG label to the emoticon container and assign the src value, path: Path of the emoticon file }}, // select the emoticon and insert it to the input box choice_face: function (e) {if(e.tar get. nodeName = "IMG") {var choice‑e.tar get; var cEle = choice. cloneNode (true); // In-Depth replication, copy all the subnodes under the node and directly copy the IMG tag of the entire expression, and add it to <p> </p> In the release box $ ("p # input_conta "). append (cEle) ;}}, // send the message to the background send: function () {// send the message var text =$ ("# input_conta" ).html (); // obtain the text in the publish box. The entire img label text displays the console. log (text); $ ("# input_conta" ).html (""); // clear the text content of the publish box $ ("div # face "). hide (); // hide emoticon selection // upload the image and send it to var out_this = this; $ ("# addTextForm") in the background "). ajaxSubmit ({url: url + "/index/text/add", type: "post", data: {'I _ text': text,}, success: function (data) {console.info (data) ;}}}},}</script>

The above is all the content of this article. I hope it will be helpful for your learning and support for helping customers.