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实现页面打印的三种方法
Mar 05 Javascript
使用JavaScript switch case 另类写法
Mar 14 Javascript
js 实现在离开页面时提醒未保存的信息(减少用户重复操作)
Jan 16 Javascript
用Javascript来生成ftp脚本的小例子
Jul 03 Javascript
JavaScript截断字符串的方法
Jul 15 Javascript
JavaScript预解析及相关技巧分析
Apr 21 Javascript
学习Javascript闭包(Closure)知识
Aug 07 Javascript
AngularJS基于ui-route实现深层路由的方法【路由嵌套】
Dec 14 Javascript
JS区分Object与Aarry的六种方法总结
Feb 27 Javascript
Vue.set()实现数据动态响应的方法
Feb 07 Javascript
如何换个角度使用VUE过滤器详解
Sep 11 Javascript
整理 node-sass 安装失败的原因及解决办法(小结)
Feb 19 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类
2006/11/27 PHP
javascript 小型动画组件与实现代码
2010/06/02 PHP
JQuery写动态树示例代码
2013/07/31 Javascript
javascript 函数及作用域总结介绍
2013/11/12 Javascript
基于jquery的simpleValidate简易验证插件
2014/01/31 Javascript
JS的参数传递示例介绍
2014/02/08 Javascript
jQuery简单实现验证邮箱格式
2015/07/15 Javascript
jQuery实现仿美橙互联两级导航菜单效果完整实例
2015/09/17 Javascript
原生js实现移动端瀑布流式代码示例
2015/12/18 Javascript
json格式数据的添加,删除及排序方法
2016/01/21 Javascript
Angular.js中$apply()和$digest()的深入理解
2016/10/13 Javascript
livereload工具实现前端可视化开发【推荐】
2016/12/23 Javascript
AngularJs上传前预览图片的实例代码
2017/01/20 Javascript
求js数组的最大值和最小值的四种方法
2017/03/03 Javascript
js实现从左向右滑动式轮播图效果
2017/07/07 Javascript
two.js之实现动画效果示例
2017/11/06 Javascript
JS实现不用中间变量temp 实现两个变量值得交换方法
2018/02/04 Javascript
Vue 创建组件的两种方法小结(必看)
2018/02/23 Javascript
Vue 样式绑定的实现方法
2019/01/15 Javascript
Vue组件跨层级获取组件操作
2020/07/27 Javascript
Python ORM框架SQLAlchemy学习笔记之数据查询实例
2014/06/10 Python
Python实现类继承实例
2014/07/04 Python
pymongo为mongodb数据库添加索引的方法
2015/05/11 Python
Python DataFrame设置/更改列表字段/元素类型的方法
2018/06/09 Python
PHP统计代码行数的小代码
2019/09/19 Python
Python selenium 自动化脚本打包成一个exe文件(推荐)
2020/01/14 Python
全球知名旅游社区巴西站点:TripAdvisor巴西
2016/07/21 全球购物
凯伦·米莲女装网上商店:Karen Millen
2017/11/07 全球购物
艺术设计专业个人求职信
2013/09/21 职场文书
党员公开承诺践诺书
2014/03/25 职场文书
任命书格式
2014/06/05 职场文书
卫生厅领导班子党的群众路线教育实践活动整改措施
2014/09/20 职场文书
逃课检讨书
2015/01/26 职场文书
邀请函范文
2015/02/02 职场文书
会计做账心得体会
2016/01/22 职场文书
2019年公司卫生管理制度样本
2019/08/21 职场文书