简易Vue评论框架的实现(父组件的实现)
时间：2021-02-12 08:52:13|栏目：vue|点击： 次
最近看到一个需求：
- 实现一个评论功能，要求对评论列表进行分页显示
- 对相应模块实现组件化
- 能显示发布者、发布时间以及内容
乍一看不是很难，但是在具体的实现上还是遇到了一些问题。此外，因为第一次使用 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 控制区结束 -->
