}
.comt-line {
width: 100%;
height: 2px;
background-color: #CCC;
margin: 10px 0;
}
.comt-wrap {
}
.comt-user {
float: left;
}
.comt-img {
width: 34px;
height: 34px;
border-radius: 17px;
}
.comt-context {
margin: 0 0 0 60px;
}
.comt-name {
color: #2B879E;
margin-bottom: 10px;
font-size: 18px;
}
</style>
<template>
<div v-if="hasComment" :class="{'comt-mask': loading}">
<h3 class='comt-title'>{{ totalCommentCount }} 条评论</h3>
<div class="comt-line"></div>
<div class="comt-wrap" v-for="comment of commentArr">
<div class="comt-user">
<img src='{{ comment.avatar }}' class="comt-img"/>
</div>
<div class="comt-context">
<p class="comt-name">{{ comment.name }}</p>
<p>
{{ comment.context }}
</p>
</div>
<div class="comt-line"></div>
</div>
</div>
</template>
<script type="text/javascript">
import {getCommentData, getTotalCommentCount} from './getData';
export default {
props: {
curPageIndex: {
type: Number,
default: 1,
},
eachPageSize: {
type: Number,
default: 7,
},
commentUrl: {
type: String,
default: '',
},
commentParams: {
type: Object,
default: null,
},
commentIsSync: {
type: Boolean,
default: true,
},
},
data () {
return {
totalCommentCount: 0,
hasComment: false,
loading: true,
}
},
computed: {
commentArr () {
this.loading = true;
let res = getCommentData(this.commentUrl, this.commentParams, this.commentIsSync, this.curPageIndex, this.eachPageSize);
this.loading = false;
return res;
},
},
created () {
let cnt = getTotalCommentCount(this.commentUrl, this.commentParams);
this.totalCommentCount = cnt;
this.hasComment = cnt > 0;
}
}
</script>
这里的 getData.js 将在下面提到，是我们获取数据的位置。
loading: 本意是在跳转页码加载评论时，对于当前评论加载0.5的透明度的遮罩，然后ajax通过它的回调函数来取消遮罩，现在这样就不能实现了，只能强行写下，然而是没有用的..
hasComment: comment组件第一次加载的时候，我们就去请求获得总共的数据长度，如果没有数据，则不显示comment组件布局内容
·curPageIndex·: 通过父组件app传递下来，使用的是props
这些数据，我们都设置一个默认值与类型比较好。
page.vue
