加入收藏 | 设为首页 | 会员中心 | 我要投稿 李大同 (https://www.lidatong.com.cn/)- 科技、建站、经验、云计算、5G、大数据,站长网!
当前位置: 首页 > 百科 > 正文

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

发布时间:2020-12-17 02:50:57 所属栏目:百科 来源:网络整理
导读:本文实例为大家分享了vue.js评论发布信息可插入QQ表情,供大家参考,具体内容如下 demo例子: HTML文本内容: div class="face_container" span @click=make_face() class="make_face"gt;i class="icon-emoji" /i/spanspan class="make_img" @click="add_img

本文实例为大家分享了vue.js评论发布信息可插入QQ表情,供大家参考,具体内容如下

demo例子:

HTML文本内容:

<div class="face_container">

<span @click=make_face() class="make_face"&gt;<i class="icon-emoji" ></i></span>
<span class="make_img" @click="add_img()"&gt;<i class="icon-Pictuer"&gt;</i></span>
<span class="send" @click=send()>发送</span>

<span class="send"><input type="checkbox" name="top" id="top" value="top">本条置顶

<div id="face" @click=choice_face($event)></div>

js文本内容:

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#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);
}
});
}
},}

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持编程之家。

(编辑:李大同)

【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容!

    推荐文章
      热点阅读