vue.js评论发布信息可插入QQ表情功能

本文的例子分享了vue.js评论发布的信息，可以插入到QQ表情中，供大家参考。具体内容如下

演示示例：

HTML文本内容：

模板div id='发布'！-发布内容输入框，使用Html5的新属性contenteditable实现可编辑文本，自动解析插入的IMG标签-div class=' publish _ container ' p content editable=' true ' id=' input _ conta '/p/div！-expression and sensing-div class=' face _ container '！-表情符号，点击icon触发事件，动态生成表情并显示-span @ click=make _ face()class=' make _ face ' I class=' Icon-emo Ji '/I/span span class=' make _ img ' @ click=' add _ img()' I class=' Icon-picture '/I/span span class=' send ' @ click=send()send/span span class=' send '输入类型=' checkbox ' name=' top ' id=' top ' value='本文top/span！-表情容器，包装生成的表情，绑定并点击表情事件-div id=' face ' @ click=choice _ face($ event)/div/div/template js文本内容：

script export default { data(){ return { id : this。$route.query.id，top: ' '，} }，methods : { make _ face : function(){ $(' div # face ')。show()；//显示表情容器if ($ ('div # faceimg ')。length==0){//动态生成表情，如果现在没有表情，生成为(var I=1；i=75I ){ //循环次数根据表达式文件的数量确定，这里是75个表达式$ ('div # face ')。追加(' img src=' http 3360/static/arclist/' I '。gif ')；//在表情容器中添加IMG标签，并赋予src值，路径为表情文件所在的路径}}}，//选择表情并插入输入框choice _ face : function(e){ if(e . target . nodename==' img '){ var choice=e . target；var CeLe=choice . clone node(true)；//深度复制，复制节点下的所有子节点，直接复制整个表达式的IMG标签，添加到发布框$('p#input_conta ')的p/p中。追加(CeLe)；}}，//向后台发送消息send:function(){ //发送消息var text=$('#input_conta ')。html()；//获取发布框的文本内容，表情符号会在整个img标签文本中显示console . log(text)；$('#input_conta ')。html(“”)；//清除发布框$('div#face ')的文本内容。hide()；//隐藏表情选择//上传图片发送到后台var out _ this=this$('#addTextForm ')。Ajax Submit({ URL : URL '/index/text/add '，type: 'post '，data: {'i_text':text，}，success:函数(数据){ console.info(数据)；} });} }，}/脚本以上就是本文的全部内容。希望对大家的学习有帮助，支持我们。