当前位置:主页 > vue.js教程 > vue.js评论发布信息可插入QQ表情功能

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

发布:2020-01-13 21:14:11 156


为找教程的网友们整理了vue.js评论发布信息插入QQ表情相关的编程文章,网友晃嘉茂根据主题投稿了本篇教程内容,涉及到vue.js、评论发布、QQ表情、vue.js评论发布信息可插入QQ表情功能相关内容,已被759网友关注,涉猎到的知识点内容可以在下方电子书获得。

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

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

demo例子:

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

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>

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


参考资料

相关文章

  • Vue.js修饰符知识点详解

    发布:2019-08-02

    本篇文章主要介绍了Vue.js学习笔记之修饰符,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • vue 计时器组件的实现代码

    发布:2022-06-27

    给大家整理一篇关于vue的教程,本篇文章主要介绍了vue 计时器组件的实现代码,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • webpack+vue.js入门教学

    发布:2020-07-21

    随着前端的快速发展,非常多的js框架被应用到项目中。Vue.js本身支持对组件的异步加载,配合Webpack的分块打包功能,可以极其轻松地实现组件的异步按需加载。 这篇文章是webpack+vue.j的入门教程


  • vue.js实现备忘录功能的方法

    vue.js实现备忘录功能的方法

    发布:2023-01-11

    给大家整理了关于vue.js的教程,下面小编就为大家带来一篇vue.js实现备忘录功能的方法。小编觉得挺不错的,现在就分享给大家,也给大家做个参考。一起跟随小编过来看看吧


  • vue.js之vue-cli脚手架的搭建详解

    vue.js之vue-cli脚手架的搭建详解

    发布:2023-01-09

    给大家整理了关于vue的教程,本篇文章主要介绍了vue.js之vue-cli脚手架的搭建详解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • vue.js中v-on:textInput无法执行事件解决方案

    发布:2020-03-10

    大家都知道vue.js通过v-on完成事件处理与绑定,但最近使用v-on的时候遇到了一个问题,所以下面这篇文章主要给大家介绍了关于vue.js中v-on:textInput无法执行事件问题的解决过程,需要的朋友可以


  • js选项卡切换效果实例代码

    发布:2021-05-07

    这篇文章主要为大家详细介绍如何完美实现js选项卡切换效果,具有一定的参考价值,感兴趣的小伙伴们可以参考一下


  • Vue.js父与子组件之间传参示例

    发布:2022-06-28

    给大家整理一篇关于Vue.js的教程,本篇文章主要介绍了Vue.js父与子组件之间传参示例,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧


网友讨论