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 相关文章推荐
CSDN轮换广告图片轮换效果
Mar 27 Javascript
控制页面按钮在后台执行期间不重复提交的JS方法
Jun 24 Javascript
Jquery通过Ajax访问XML数据的小例子
Nov 18 Javascript
IE8 内存泄露(内存一直增长 )的原因及解决办法
Apr 06 Javascript
node.js版本管理工具n无效的原理和解决方法
Nov 24 Javascript
jquery插件锦集【推荐】
Dec 16 Javascript
基于jQuery实现左侧菜单栏可折叠功能
Dec 27 Javascript
js和jQuery以及easyui实现对下拉框的指定赋值方法
Jan 23 jQuery
JS实现快递单打印功能【推荐】
Jun 21 Javascript
JS计算两个数组的交集、差集、并集、补集(多种实现方式)
May 21 Javascript
解决vue-cli 打包后自定义动画未执行的问题
Nov 12 Javascript
vue+Element-ui实现分页效果
Nov 15 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文件操作的详解
2013/06/05 PHP
php中的boolean(布尔)类型详解
2013/10/28 PHP
PHP创建文件,并向文件中写入数据,覆盖,追加的实现代码
2016/03/25 PHP
详解JS 比较两个Json对象的值是否相等的实例
2013/11/20 Javascript
js select option对象小结
2013/12/20 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
javascript实现复制与粘贴操作实例
2014/10/16 Javascript
JS解析XML实例分析
2015/01/30 Javascript
JS实现一个按钮的方法
2015/02/05 Javascript
JS实现超过长度限制后自动跳转下一款文本框的方法
2015/02/23 Javascript
DOM中事件处理概览与原理的全面解析
2016/08/16 Javascript
jQuery使用deferreds串行多个ajax请求
2016/08/22 Javascript
layui表格内容溢出的解决方法
2019/09/06 Javascript
JS继承定义与使用方法简单示例
2020/02/19 Javascript
Bootstrap简单实用的表单验证插件BootstrapValidator用法实例详解
2020/03/29 Javascript
Vue发布订阅模式实现过程图解
2020/04/30 Javascript
Vue的props父传子的示例代码
2020/05/20 Javascript
Openlayers显示瓦片网格信息的方法
2020/09/28 Javascript
Vue路由权限控制解析
2020/11/09 Javascript
[02:42]DOTA2城市挑战赛收官在即 四强之争风起云涌
2018/06/05 DOTA
简单讲解Python中的闭包
2015/08/11 Python
python实现自主查询实时天气
2018/06/22 Python
python创建文件备份的脚本
2018/09/11 Python
对Python通过pypyodbc访问Access数据库的方法详解
2018/10/27 Python
python通过SSH登陆linux并操作的实现
2019/10/10 Python
python 浅谈serial与stm32通信的编码问题
2019/12/18 Python
家长会学生家长演讲稿
2013/12/29 职场文书
行政工作个人的自我评价
2014/02/13 职场文书
业务员简历自我评价
2014/03/06 职场文书
幼儿园安全生产月活动总结
2014/07/05 职场文书
岳麓书院导游词
2015/02/03 职场文书
周一问候语大全
2015/11/10 职场文书
维护民族团结心得体会2016
2016/01/15 职场文书
python制作图形界面的2048游戏, 基于tkinter
2021/04/06 Python
Python基础之进程详解
2021/05/21 Python
pandas进行数据输入和输出的方法详解
2022/03/23 Python