<template> <Layout style="background: none;"> <LayoutHeader class="comment-header" :back="!popup" theme="white" slot='header'> {{headerText}} <template v-slot:opts v-if="popup"> <i class="iconfont icon-close icon" @touchend.prevent="onClose"></i> </template> </LayoutHeader> <CommentList ref="commentList" :dest-id="destId" :pos-id="posId" :article-id="articleId" :comment-id="commentId" :column-type="1001" @on-page-change="onPageChange" @on-comment="onComment" @on-page-ready="onPageReady" @on-close="onClose"></CommentList> </Layout> </template> <script> import CommentList from './comment-list'; export default { name: 'Comment', props: { destId: Number, popup: { type: Boolean, default: false }, posId: Number, articleId: Number, commentId: Number, commentCount: Number }, data() { return { size: 0 }; }, computed: { headerText() { return this.commentCount ? `${this.commentCount}条评论` : '评论'; } }, methods: { onPageChange({size}) { this.size = size; }, onPageReady(params) { this.$emit('on-page-ready', params); }, onClose() { this.$emit('on-close'); }, init() { this.size = 0; this.$refs.commentList.init(); }, onComment(params) { this.$emit('on-comment', params); } }, components: {CommentList} }; </script> <style scoped lang="scss"> .comment-header { padding-top: 0!important; } </style>