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


Posted in Javascript onAugust 08, 2017

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
javascript学习之闭包分析
Dec 02 Javascript
jquery插件制作 表单验证实现代码
Aug 17 Javascript
javascript全局变量封装模块实现代码
Nov 28 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
jQuery背景插件backstretch使用指南
Apr 21 Javascript
jQuery插件支持同一页面被多次调用
Feb 14 Javascript
Jquery zTree 树控件异步加载操作
Feb 25 Javascript
JavaScript数组方法总结分析
May 06 Javascript
jQuery使用Layer弹出层插件闪退问题
Dec 22 Javascript
深入解析Vue源码实例挂载与编译流程实现思路详解
May 05 Javascript
vue中created和mounted的区别浅析
Aug 13 Javascript
浅谈vuex为什么不建议在action中修改state
Feb 02 Javascript
vuejs使用FormData实现ajax上传图片文件
Aug 08 #Javascript
基于Vue实现支持按周切换的日历
Sep 24 #Javascript
JS中正则表达式要注意lastIndex属性
Aug 08 #Javascript
vue+mockjs模拟数据实现前后端分离开发的实例代码
Aug 08 #Javascript
React Native如何消除启动时白屏的方法
Aug 08 #Javascript
react native带索引的城市列表组件的实例代码
Aug 08 #Javascript
React Native仿美团下拉菜单的实例代码
Aug 08 #Javascript
You might like
php MsSql server时遇到的中文编码问题
2009/06/11 PHP
php实现扫描二维码根据浏览器类型访问不同下载地址
2014/10/15 PHP
PHP排序算法之直接插入排序(Straight Insertion Sort)实例分析
2018/04/20 PHP
javascript新手语法小结
2008/06/15 Javascript
基于jQuery的公告无限循环滚动实现代码
2012/05/11 Javascript
jQuery插件jQuery-JSONP开发ajax调用使用注意事项
2013/11/22 Javascript
jQuery实现回车键(Enter)切换文本框焦点的代码实例
2014/05/05 Javascript
js图片轮播手动切换效果
2015/11/10 Javascript
jQuery实现的精美平滑二级下拉菜单效果代码
2016/03/28 Javascript
jquery遍历table的tr获取td的值实现方法
2016/05/19 Javascript
利用vue写todolist单页应用
2016/12/15 Javascript
JavaScript实现前端分页控件
2017/04/19 Javascript
如何基于vue-cli3.0构建功能完善的移动端架子
2019/04/24 Javascript
通过原生vue添加滚动加载更多功能
2019/11/21 Javascript
解决vue的touchStart事件及click事件冲突问题
2020/07/21 Javascript
使用python实现http及ftp服务进行数据传输的方法
2018/10/26 Python
Python多进程写入同一文件的方法
2019/01/14 Python
python使用celery实现异步任务执行的例子
2019/08/28 Python
PyTorch预训练的实现
2019/09/18 Python
解决windows下python3使用multiprocessing.Pool出现的问题
2020/04/08 Python
利用python控制Autocad:pyautocad方式
2020/06/01 Python
python音频处理的示例详解
2020/12/23 Python
css3的transform造成z-index无效解决方案
2014/12/04 HTML / CSS
竞选班长演讲稿
2013/12/30 职场文书
秋季婚礼证婚词
2014/01/11 职场文书
简短大学毕业感言
2014/01/18 职场文书
红旗方阵解说词
2014/02/12 职场文书
厂办主管岗位职责范本
2014/02/28 职场文书
食品安全责任书
2014/04/15 职场文书
行政秘书工作自我鉴定
2014/09/15 职场文书
失职检讨书大全
2015/01/26 职场文书
转正申请报告格式
2015/05/15 职场文书
蜗居观后感
2015/06/11 职场文书
2016年“12.4”法制宣传日活动总结
2016/04/01 职场文书
详解前端任务构建利器Gulp.js使用指南
2021/04/30 Javascript
Windows11插耳机没反应怎么办? win11耳机没声音的多种解决办法
2021/11/21 数码科技