简易Vue评论框架的实现(父组件的实现)


Posted in Javascript onJanuary 08, 2018

最近看到一个需求:

  1. 实现一个评论功能,要求对评论列表进行分页显示
  2. 对相应模块实现组件化
  3. 能显示发布者、发布时间以及内容

乍一看不是很难,但是在具体的实现上还是遇到了一些问题。此外,因为第一次使用 vue ,看文档看的也是一脸懵逼,话不多说,下面来分析一下,具体每个模块是怎么实现的。

源码地址

评论表单代码:

<!-- 文档结构区开始 -->
<template>
  <div id="comment" >
    <UserDiv @transferUser="getInput" ></UserDiv>
    <CommentDiv :List="List"></CommentDiv>
    <PageDiv @transferUser="getPage" :totalCount="totalCount" :currentPage="currentPage"></PageDiv>
  </div>
</template>
<!-- 文档结构区结束 -->
<!-- js 控制区开始 -->
<script>
//引入组件 commentInput、commentList、pagination
import UserDiv from './commentInput.vue'
import PageDiv from './pagination.vue'
import CommentDiv from './commentList.vue'

export default {
  //声明组件名
  name: 'comment',

  //包含实例可用组件的哈希表
  components: {
    UserDiv,
    PageDiv,
    CommentDiv
  },

  //声明组件参数
  data() {
    return {
      totalCount: 0,
      currentPage: 1,
      pagesize: 3,
      totalData: [],
      List: [],
    }
  },

  methods: {
    //显示评论列表信息的方法
    getInput(msg) {
      //将评论信息保存到评论数组里
      this.totalData.push({ text: msg })
      //计算评论信息总条数长度
      this.totalCount = this.totalData.length

      //判断评论总数是否大于单页显示条数
      if (this.totalCount <= this.pagesize) {
       // 显示所有评论
       this.List = this.totalData
      } else {
       // 截取totalData中 this.totalCount - this.pagesize 后面的元素进行显示
       this.List = this.totalData.slice(this.totalCount - this.pagesize)
      }
      //点击评论按钮,默认跳转显示第一页内容
      this.currentPage = 1
      //评论列表倒序显示,即最新评论,显示在最上面
      this.List.reverse()

    },

    // 计算评论列表每一页的显示内容
    getPage(curr, size) {
      this.currentPage = curr

      if (this.totalCount <= this.pagesize) {
        //显示所有评论
        this.List = this.totalData
      } else {
        var start = this.totalCount - this.currentPage * this.pagesize
        if (start < 0) { start = 0 }
        // 截取totalData中 [start, start + this.pagesize] 位元素进行显示
        this.List = this.totalData.slice(start, start + this.pagesize)
      }
      //评论列表倒序显示,即最新评论,显示在最上面
      this.List.reverse()
    }
  },
}
</script>
<!-- js 控制区结束 -->

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript 垃圾收集机制介绍理解
May 14 Javascript
jquery网页元素拖拽插件效果及实现
Aug 05 Javascript
再谈Javascript中的基本类型和引用类型(推荐)
Jul 01 Javascript
JavaScript中三种常见的排序方法
Feb 24 Javascript
JavaScript实现的浏览器下载文件的方法
Aug 09 Javascript
微信小程序按钮去除边框线分享页面功能
Aug 27 Javascript
vue form check 表单验证的实现代码
Dec 09 Javascript
jQuery实现左右两个列表框的内容相互移动功能示例
Jan 27 jQuery
layui+SSM的数据表的增删改实例(利用弹框添加、修改)
Sep 27 Javascript
微信小程序保持session会话的方法
Mar 20 Javascript
小程序实现图片移动缩放效果
May 26 Javascript
JS实现简单打字测试
Jun 24 Javascript
关于react-router/react-router-dom v4 history不能访问问题的解决
Jan 08 #Javascript
OkHttp踩坑随笔为何 response.body().string() 只能调用一次
Jan 08 #Javascript
Vue 组件(component)教程之实现精美的日历方法示例
Jan 08 #Javascript
一步步教你利用webpack如何搭一个vue脚手架(超详细讲解和注释)
Jan 08 #Javascript
深入理解 webpack 文件打包机制(小结)
Jan 08 #Javascript
webpack构建的详细流程探底
Jan 08 #Javascript
详解ES6中的代理模式——Proxy
Jan 08 #Javascript
You might like
php在程序中将网页生成word文档并提供下载的代码
2012/10/09 PHP
解析smarty 截取字符串函数 truncate的用法介绍
2013/06/20 PHP
解析zend Framework如何自动加载类
2013/06/28 PHP
简单的php文件上传(实例)
2013/10/27 PHP
一个显示效果非常不错的PHP错误、异常处理类
2014/03/21 PHP
PHP中exec函数和shell_exec函数的区别
2014/08/20 PHP
10个实用的PHP正则表达式汇总
2014/10/23 PHP
php+ajax实现无刷新分页的方法
2014/11/04 PHP
PHP封装的XML简单操作类完整实例
2017/11/13 PHP
PHP进阶学习之命名空间基本用法分析
2019/06/18 PHP
php的单例模式及应用场景详解
2021/02/27 PHP
JS 拼图游戏 面向对象,注释完整。
2009/06/18 Javascript
js 时间格式与时间戳的相互转换示例代码
2013/12/25 Javascript
javascript实现详细时间提醒信息效果的方法
2015/03/11 Javascript
深入解析JavaScript中的数字对象与字符串对象
2015/10/21 Javascript
javascript 用函数实现继承详解
2016/05/28 Javascript
完美解决jQuery fancybox ie 无法显示关闭按钮的问题
2016/11/29 Javascript
基于jQuery实现火焰灯效果导航菜单
2017/01/04 Javascript
使用puppeteer破解极验的滑动验证码
2018/02/24 Javascript
swiper Scrollbar滚动条组件详解
2019/09/08 Javascript
使用JS实现鼠标放上图片进行放大离开实现缩小功能
2021/01/27 Javascript
javascript实现固定侧边栏
2021/02/09 Javascript
[42:25]2018DOTA2亚洲邀请赛 4.5 淘汰赛 LGD vs Liquid 第三场
2018/04/06 DOTA
用Python实现通过哈希算法检测图片重复的教程
2015/04/02 Python
python正则表达式爬取猫眼电影top100
2018/02/24 Python
python英语单词测试小程序代码实例
2019/09/09 Python
详解python日志输出使用配置文件格式
2021/02/10 Python
详解CSS3的perspective属性设置3D变换距离的方法
2016/05/23 HTML / CSS
实习教师自我鉴定
2013/09/27 职场文书
门诊挂号室室长岗位职责
2013/11/27 职场文书
多媒体专业自我鉴定
2014/02/28 职场文书
好习惯伴我成长演讲稿
2014/05/21 职场文书
大学生实训报告总结
2014/11/05 职场文书
保管员岗位职责
2015/02/14 职场文书
会计岗位职责范本
2015/04/02 职场文书
MySQL添加索引特点及优化问题
2022/07/23 MySQL