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实现动态增加文件域表单
Feb 12 Javascript
js父页面与子页面不同时显示的方法
Oct 16 Javascript
使用AngularJS创建自定义的过滤器的方法
Jun 18 Javascript
理解js对象继承的N种模式
Jan 25 Javascript
jquery mobile界面数据刷新的实现方法
May 28 Javascript
对javascript继承的理解
Oct 11 Javascript
jquery uploadify隐藏上传进度的实现方法
Feb 06 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
利用 spin.js 生成等待效果(js 等待效果)
Jun 25 Javascript
thinkjs微信中控之微信鉴权登陆的实现代码
Aug 08 Javascript
JavaScript基于用户照片姓名生成海报
May 29 Javascript
vue 表单输入框不支持focus及blur事件的解决方案
Nov 17 Vue.js
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获取windows登录用户名的方法
2014/06/24 PHP
PHP结合JQueryJcrop实现图片裁切实例详解
2014/07/24 PHP
jQuery ui1.7 dialog只能弹出一次问题
2009/08/27 Javascript
nodejs中exports与module.exports的区别详细介绍
2013/01/14 NodeJs
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
2013/08/28 Javascript
jquery动态增加删除表格行的小例子
2013/11/14 Javascript
利用javaScript实现点击输入框弹出窗体选择信息
2013/12/11 Javascript
JS实现判断滚动条滚到页面底部并执行事件的方法
2014/12/18 Javascript
js实现点击图片改变页面背景图的方法
2015/02/28 Javascript
JavaScript动态插入CSS的方法
2015/12/10 Javascript
EasyUI Combobox设置默认值 获取text的方法
2016/11/28 Javascript
JavaScript函数柯里化原理与用法分析
2017/03/31 Javascript
深入理解nodejs搭建静态服务器(实现命令行)
2019/02/05 NodeJs
微信小程序扫描二维码获取信息实例详解
2019/05/07 Javascript
JS实现烟花爆炸效果
2020/03/10 Javascript
合并Excel工作薄中成绩表的VBA代码,非常适合教育一线的朋友
2009/04/09 Python
深入解析Python编程中JSON模块的使用
2015/10/15 Python
python 禁止函数修改列表的实现方法
2017/08/03 Python
Python3.5编程实现修改IIS WEB.CONFIG的方法示例
2017/08/18 Python
python中kmeans聚类实现代码
2018/02/23 Python
python删除本地夹里重复文件的方法
2020/11/19 Python
Python Matplotlib库安装与基本作图示例
2019/01/09 Python
python中导入 train_test_split提示错误的解决
2020/06/19 Python
python 写一个文件分发小程序
2020/12/05 Python
IE矩阵Matrix滤镜旋转与缩放及如何结合transform
2012/11/29 HTML / CSS
CSS3 绘制BMW logo实的现代码
2013/04/25 HTML / CSS
使用canvas实现黑客帝国数字雨效果
2020/01/02 HTML / CSS
英国音乐设备和乐器商店:Gear4music
2017/10/16 全球购物
西班牙太阳镜品牌:Hawkers
2018/03/11 全球购物
lookfantastic荷兰:在线购买奢华护肤、护发和化妆品
2018/11/27 全球购物
英国领先的在线高尔夫商店:Gamola Golf
2019/11/16 全球购物
销售业务实习自我鉴定
2013/09/23 职场文书
环境保护建议书
2014/08/26 职场文书
家长通知书家长意见
2014/12/30 职场文书
CSS3实现的侧滑菜单
2021/04/27 HTML / CSS
浅谈sql_@SelectProvider及使用注意说明
2021/08/04 Java/Android