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 相关文章推荐
Easyui form combobox省市区三级联动
Jan 13 Javascript
Javascript中获取浏览器类型和操作系统版本等客户端信息常用代码
Jun 28 Javascript
微信小程序 使用picker封装省市区三级联动实例代码
Oct 28 Javascript
jquery ajax后台返回list,前台用jquery遍历list的实现
Oct 30 Javascript
Vue.js实现简单ToDoList 前期准备(一)
Dec 01 Javascript
vue之nextTick全面解析
May 17 Javascript
利用Angular2 + Ionic3开发IOS应用实例教程
Jan 15 Javascript
js正则相关知识点专题
May 10 Javascript
angular4+百分比进度显示插件用法示例
May 05 Javascript
新手如何快速理解js异步编程
Jun 24 Javascript
解决vue elementUI中table里数字、字母、中文混合排序问题
Jan 07 Javascript
JavaScript实现打砖块游戏
Feb 25 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 ADODB使用方法集锦
2008/03/25 PHP
PHP中使用imagick实现把PDF转成图片
2015/01/26 PHP
php商品对比功能代码分享
2015/09/24 PHP
thinkphp3.2.0 setInc方法 源码全面解析
2018/01/29 PHP
学习YUI.Ext 第三天
2007/03/10 Javascript
JavaScript实现文字与图片拖拽效果的方法
2015/02/16 Javascript
AngualrJS中每次$http请求时的一个遮罩层Directive
2016/01/26 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
JS对象序列化成json数据和json数据转化为JS对象的代码
2017/08/23 Javascript
AngularJS实现的省市二级联动功能示例【可对选项实现增删】
2017/10/26 Javascript
Vue2.0 给Tab标签页和页面切换过渡添加样式的方法
2018/03/13 Javascript
如何用input标签和jquery实现多图片的上传和回显功能
2018/05/16 jQuery
react-router-dom 嵌套路由的实现
2020/05/02 Javascript
javascript实现移动端红包雨页面
2020/06/23 Javascript
微信小程序实现天气预报功能(附源码)
2020/12/10 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
[03:17]史诗级大片应援2018DOTA2国际邀请赛 致敬每一位坚守遗迹的勇士
2018/07/20 DOTA
Python专用方法与迭代机制实例分析
2014/09/15 Python
Python unittest单元测试框架总结
2018/09/08 Python
使用Python制作一个打字训练小工具
2019/10/01 Python
关于pandas的离散化,面元划分详解
2019/11/22 Python
使用SQLAlchemy操作数据库表过程解析
2020/06/10 Python
CSS3解决移动页面上点击链接触发色块的问题
2016/06/03 HTML / CSS
CSS3中Animation属性的使用详解
2015/08/06 HTML / CSS
检测浏览器对HTML5和CSS3支持度的方法
2015/06/25 HTML / CSS
详解Html5 监听拦截Android返回键方法
2018/04/18 HTML / CSS
美国在线打印网站:Overnight Prints
2018/10/11 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
公司会计岗位职责
2014/02/13 职场文书
难忘的一天教学反思
2014/04/30 职场文书
公安领导班子四风问题个人整改措施思想汇报
2014/10/09 职场文书
党的群众路线教育实践活动心得体会(乡镇)
2014/11/03 职场文书
2015年禁毒宣传活动总结
2015/03/25 职场文书
住房公积金贷款工资证明
2015/06/12 职场文书
Python+Selenium自动化环境搭建与操作基础详解
2022/03/13 Python
Python学习之迭代器详解
2022/04/01 Python