当前位置:首页 > 编程教程 > vue技术文章 > vue.js评论发布信息可插入QQ表情功能

关于vue.js评论发布信息可插入QQ表情功能介绍

  • 发布时间:
  • 作者:码农之家
  • 点击:156

这篇文章主要知识点是关于vue.js、评论发布、QQ表情、的内容,如果大家想对相关知识点有系统深入的学习,可以参阅以下电子书

Vue.js项目实战
Vue.js项目实战影印完整版
  • 类型:Vue大小:141 MB格式:PDF作者:纪尧姆·周
立即下载

vue.js评论发布信息可插入QQ表情功能

本文实例为大家分享了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>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持码农之家。

以上就是本次给大家分享的关于java的全部知识点内容总结,大家还可以在下方相关文章里找到相关文章进一步学习,感谢大家的阅读和支持。

vue.js评论发布信息插入QQ表情 相关电子书
学习笔记
网友NO.165192

基于vue.js 2.x的虚拟滚动条的示例代码

前言 记得以前偶然有一次浏览过一个开源的cms项目,发现这个项目的左边的菜单已经超出了windows的宽度,我就好奇为什么没出滚动条呢?然后我仔细一看,发现它左侧有一个小的div,然后我尝试着拖动它,发现竟能和原生的滚动条一样!可以通过查看它的源码,发现了这款滚动条的叫做slimScroll,然后我去它的github仓库 看了下,研究了一下源码,给我的感觉是我也能做出来一样的滚动条!通过vue实现! 设计 好, 现在开始我们的设计滚动条的步骤: 设计滚动条dom 首先要思考的是: 如果要使你需要滚动的内容滚动的话,首先一点是它的父dom必须为固定长宽,即超出部分要隐藏掉,即加了个样式: overflow: hidden , 所以,我们给所要滚动的内容加个包装,使它的长宽和父dom相等,然后有一个样式叫: overflow: hidden ,这个包装的元素就叫 scrollPanel 其次:我们知道……

网友NO.108440

Vue.js学习之计算属性

前言 计算属性是用来声明式的描述一个值依赖了其它的值。当你在模板里把数据绑定到一个计算属性上时,Vue 会在其依赖的任何值导致该计算属性改变时更新 DOM。这个功能非常强大,它可以让你的代码更加声明式、数据驱动并且易于维护。 开始用vue会把所有的模版上的数据都放到data属性里,或者有的时候data属性里变量多了之后觉得有些只是用一次的变量就直接写到模版里了,后来看到同组的同事在用computed属性,就又去查了一下api,发现这种情况其实最好用的就是computed。 1. computed可以保持模版的清晰,在template里尽量只进行展示和绑定,而不要加入逻辑操作。 2. 用computed的还有一个好处就是会跟随其他data属性的变化自动变化 比如官方文档的一个例子: var vm = new Vue({ el: '#demo', data: { firstName: 'Foo', lastName: 'Bar', fullName: 'Foo Bar' }})vm.$watch('firstName', ……

网友NO.881483

vue.js模仿京东省市区三级联动的选择组件实例代码

前言 在最近的工作中需要一个盒京东购物车地址选择相似的一个省市区三级联动选择组件,google查了下都是下拉框形式的,于是自己写了一个,希望对使用vue开发项目的朋友有帮助,下面话不多说了,来一起看看详细的介绍吧。 显示效果如下: 注意: 使用vue2.0开发 实例代码 html代码如下 !--居住地址三级联动选项-- section class="showChose" v-show="showChose" section class="address" section class="title" h4居住地址/h4 span @click="closeAdd()"×/span /section section class="title" div class="area" @click="provinceSelected()"{{Province?Province:info[province-1].name}}/div div class="area" @click="citySelected()" :class="City?'':'active'"{{City?City:'请选择'}}/div div class="area" @click="districtSelected()" :class="District?'':'active'" v-show="City"{{District?District:'请选择'}}/div /section ul li class="addList" v-for="(v,k) in info" @click="getProvinceId(v.id, v.name, k)" v-……

网友NO.336694

vue.js分页中单击页码更换页面内容的方法(配合spring springmvc)

html代码: section class="container page-home"div id="main-content" class="wrap-container zerogrid"article id="news_content" v-for="item in items"div class="col-1-2 right"img :src="item.coverimage" class="news_image"/!-- :要与img标签之间有空格 --/divdiv class="col-1-2 left"a class="art-category left" href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" {{item.releasetime.substring(0,19)}}/adiv class="clear"/divdiv class="art-content"h2{{item.title}}/h2div class="info"a href="#" rel="external nofollow" rel="external nofollow" rel="external nofollow" rel="external nofollow" {{item.author}}/a/divdiv class="line"/divp{{item.remark}}/pa v-bind:href="['/island/stage/newscontent.html?id='+item.id+'gt;阅读全文/aspan href="javascript:;" rel="external nofollow" class="more" 浏览量 : {{item.reading}}/span/div/div/article!-- 循环结束(新闻) --/divdiv id="pagination" class="clearfix"ulli v-for="page in pages"a class="curren……

网友NO.210756

vue.js仿hover效果的实现方法示例

本文实例讲述了vue.js仿hover效果的实现方法。分享给大家供大家参考,具体如下: !DOCTYPE htmlhtml lang="en"head meta charset="UTF-8" titleTitle/title style *{ margin: 0; padding: 0; list-style: none; } ul{ margin:100px ; } li{ width: 50px; height: 50px; border: 1px solid; float: left; text-align: center; line-height: 50px ; } .act{ background: red; } /style/headbodyul id="app" li @click="fun(x)" v-for="x in num" :class="index===x?'act':''"{{x}}/li/ul/bodyscript src="https://cdn.bootcss.com/vue/2.4.4/vue.min.js"/scriptscript const app=new Vue({ el:"#app", data:{ num:10, index:1, }, methods:{ fun(x){ this.index=x } } })/script/html 这里使用 在线HTML/CSS/JavaScript代码运行工具 :http://tools.jb51.net/code/HtmlJsRun测试上述代码,可得如下运行效果: 希望本文所述对大家vue.js程序设计有所帮助。 ……

<
1
>

Copyright 2018-2020 xz577.com 码农之家

本站所有电子书资源不再提供下载地址,只分享来路

版权投诉 / 书籍推广 / 赞助:QQ:520161757