马三立打一字,华硕渠道大学,悬丝
本文实例为大家分享了vue.js评论发布信息可插入qq表情，供大家参考，具体内容如下
demo例子：
html文本内容：
我要评论
<template>
<div id="publish">
<!-- 发布内容输入框，利用html5的新属性contenteditable，实现可编辑文本 ，会自动将插入的img标签解析-->
<div class="publish_container">
<p contenteditable="true" id="input_conta"></p>
</div>
<!-- 表情和发送-->
<div class="face_container">
<!-- 表情icon，点击触发事件，动态生成表情并显示 -->
<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()>发送</span>
<span class="send"><input type="checkbox" name="top" id="top" value="top">本条置顶</span>
<!-- 表情容器 ，包裹生成的表情，绑定点击表情事件-->
<div id="face" @click=choice_face($event)></div>
</div>
</div>
</template>
js文本内容：
<script>
export default {
data () {
return {
id:this.$route.query.id,
top:"",
}
},
methods:{
make_face:function(){
$("div#face").show(); //显示表情容器
if($("div#face>img").length==0){ //动态生成表情，如果现在没有表情则生成
for(var i=1;i<=75;i++){ //根据表情文件数量决定循环次数，这里为75个表情
$("div#face").append('<img src="/static/arclist/'+i+'.gif">'); //为表情容器里添加img标签，并赋予src值，路径为表情文件所在路径
}
}
},// 选择表情并插入到输入框
choice_face:function(e){
if(e.target.nodename=="img"){
var choice=e.target;
var cele = choice.clonenode(true); //深度复制，复制节点下面所有的子节点 ，直接将整个表情的img标签复制，并添加到发布框的<p></p>里面
$("p#input_conta").append(cele);
}
},
// 发送信息给后台
send:function(){
// 发送留言
var text=$("#input_conta").html(); //获得发布框的文本内容，表情会以整个img标签文本显示
console.log(text);
$("#input_conta").html(""); //清除发布框的文本内容
$("div#face").hide(); //隐藏表情选择// 上传图片并发送给后台
var out_this=this;
$("#addtextform").ajaxsubmit({
url: url+"/index/text/add",
type: "post",
data: {'i_text':text,
},
success: function (data) {
console.info(data);
}
});
}
},
}
</script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持移动技术网。
如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！ 点击进行留言回复
详解element上传组件before-remove钩子问题解决
vue.js中使用微信扫一扫解决invalid signature问题(完美解决)
网友评论