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 14 Javascript
jquery解析XML字符串和XML文件的方法说明
Feb 21 Javascript
js实现文字垂直滚动和鼠标悬停效果
Dec 31 Javascript
jQuery EasyUI常用数据验证汇总
Sep 18 Javascript
Vue.js中用v-bind绑定class的注意事项
Dec 13 Javascript
Three.js基础部分学习
Jan 08 Javascript
Vue实现virtual-dom的原理简析
Jul 10 Javascript
详解Node中导入模块require和import的区别
Aug 11 Javascript
Angularjs 手写日历的实现代码(不用插件)
Oct 18 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
Jul 18 Javascript
解决vue安装less报错Failed to compile with 1 errors的问题
Oct 22 Javascript
Vue-router编程式导航的两种实现代码
Mar 04 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
Drupal7连接多个数据库及常见问题解决
2014/03/02 PHP
php+layui数据表格实现数据分页渲染代码
2019/10/26 PHP
css3实现背景模糊的三种方式
2021/03/09 HTML / CSS
textarea的value是html文件源代码,存成html文件的代码
2007/04/20 Javascript
imgAreaSelect 中文文档帮助说明
2011/10/08 Javascript
jquery ajax跨域解决方法(json方式)
2014/02/04 Javascript
jquery实现兼容IE8的异步上传文件
2015/06/15 Javascript
jQuery入门之层次选择器实例简析
2015/12/11 Javascript
jQuery实现div拖拽效果实例分析
2016/02/20 Javascript
非常棒的jQuery图片轮播效果
2016/04/17 Javascript
JS和jQuery使用submit方法无法提交表单的原因分析及解决办法
2016/05/17 Javascript
JavaScript ES6中export、import与export default的用法和区别
2017/03/14 Javascript
原生JS改变透明度实现轮播效果
2017/03/24 Javascript
基于jQuery Easyui实现登陆框界面
2017/07/10 jQuery
浅谈React深度编程之受控组件与非受控组件
2017/12/26 Javascript
亲自动手实现vue日历控件
2019/06/26 Javascript
从零搭一个自用的前端脚手架的方法步骤
2019/09/23 Javascript
p5.js临摹动态图形的方法
2019/10/23 Javascript
python局域网ip扫描示例分享
2014/04/03 Python
Python实现分割文件及合并文件的方法
2015/07/10 Python
Python读取MRI并显示为灰度图像实例代码
2018/01/03 Python
用PyInstaller把Python代码打包成单个独立的exe可执行文件
2018/05/26 Python
python实现简单的单变量线性回归方法
2018/11/08 Python
python获取时间及时间格式转换问题实例代码详解
2018/12/06 Python
python修改txt文件中的某一项方法
2018/12/29 Python
解决Pandas的DataFrame输出截断和省略的问题
2019/02/08 Python
Django自定义用户登录认证示例代码
2019/06/30 Python
python pip源配置,pip配置文件存放位置的方法
2019/07/12 Python
北美大型运动类产品商城:Champs Sports
2017/01/12 全球购物
竞聘上岗演讲稿范文
2014/01/10 职场文书
2014年财务工作自我评价
2014/09/23 职场文书
KTV门卫岗位职责
2014/10/09 职场文书
小学工作总结2015
2015/05/04 职场文书
2015年中秋晚会主持稿
2015/07/30 职场文书
PHP使用非对称加密算法RSA
2021/04/21 PHP
Tomcat执行startup.bat出现闪退的原因及解决办法
2022/04/20 Servers