mirror of https://github.com/halo-dev/halo
fix: the value problem caused by multi-level nesting of comment components
parent
6cc1c61a5e
commit
a2bdc151b3
|
@ -1,16 +1,13 @@
|
|||
<template>
|
||||
<a-drawer
|
||||
title="评论列表"
|
||||
:width="isMobile()?'100%':'460'"
|
||||
:width="isMobile() ? '100%' : '460'"
|
||||
closable
|
||||
:visible="visible"
|
||||
destroyOnClose
|
||||
@close="onClose"
|
||||
>
|
||||
<a-row
|
||||
type="flex"
|
||||
align="middle"
|
||||
>
|
||||
<a-row type="flex" align="middle">
|
||||
<a-col :span="24">
|
||||
<a-list itemLayout="horizontal">
|
||||
<a-list-item>
|
||||
|
@ -25,7 +22,7 @@
|
|||
</a-col>
|
||||
<a-divider />
|
||||
<a-col :span="24">
|
||||
<a-empty v-if="comments.length==0" />
|
||||
<a-empty v-if="comments.length == 0" />
|
||||
<TargetCommentTree
|
||||
v-else
|
||||
v-for="(comment, index) in comments"
|
||||
|
@ -48,27 +45,19 @@
|
|||
</div>
|
||||
<a-modal
|
||||
v-if="selectedComment"
|
||||
:title="'回复给:'+selectedComment.author"
|
||||
:title="'回复给:' + selectedComment.author"
|
||||
v-model="replyCommentVisible"
|
||||
@close="onReplyClose"
|
||||
destroyOnClose
|
||||
>
|
||||
<template slot="footer">
|
||||
<a-button
|
||||
key="submit"
|
||||
type="primary"
|
||||
@click="handleCreateClick"
|
||||
>
|
||||
<a-button key="submit" type="primary" @click="handleCreateClick">
|
||||
回复
|
||||
</a-button>
|
||||
</template>
|
||||
<a-form layout="vertical">
|
||||
<a-form-item>
|
||||
<a-input
|
||||
type="textarea"
|
||||
:autosize="{ minRows: 8 }"
|
||||
v-model="replyComment.content"
|
||||
/>
|
||||
<a-input type="textarea" :autosize="{ minRows: 8 }" v-model="replyComment.content" />
|
||||
</a-form-item>
|
||||
</a-form>
|
||||
</a-modal>
|
||||
|
@ -129,7 +118,7 @@ export default {
|
|||
}
|
||||
},
|
||||
watch: {
|
||||
visible: function(newValue, oldValue) {
|
||||
visible(newValue, oldValue) {
|
||||
this.$log.debug('old value', oldValue)
|
||||
this.$log.debug('new value', newValue)
|
||||
if (newValue) {
|
||||
|
@ -157,6 +146,8 @@ export default {
|
|||
this.replyCommentVisible = true
|
||||
this.replyComment.parentId = comment.id
|
||||
this.replyComment.postId = this.id
|
||||
|
||||
console.log('comment reply', this.replyComment)
|
||||
},
|
||||
handleCreateClick() {
|
||||
if (!this.replyComment.content) {
|
||||
|
@ -166,6 +157,8 @@ export default {
|
|||
})
|
||||
return
|
||||
}
|
||||
console.log('target:', this.target)
|
||||
console.log('replyComment:', this.replyComment)
|
||||
commentApi.create(this.target, this.replyComment).then(response => {
|
||||
this.$message.success('回复成功!')
|
||||
this.replyComment = {}
|
||||
|
|
|
@ -2,17 +2,11 @@
|
|||
<div>
|
||||
<a-comment>
|
||||
<template slot="actions">
|
||||
<a-dropdown
|
||||
:trigger="['click']"
|
||||
v-if="comment.status === 'AUDITING'"
|
||||
>
|
||||
<a-dropdown :trigger="['click']" v-if="comment.status === 'AUDITING'">
|
||||
<span href="javascript:void(0);">通过</span>
|
||||
<a-menu slot="overlay">
|
||||
<a-menu-item key="1">
|
||||
<span
|
||||
href="javascript:void(0);"
|
||||
@click="handleEditStatusClick('PUBLISHED')"
|
||||
>通过</span>
|
||||
<span href="javascript:void(0);" @click="handleEditStatusClick('PUBLISHED')">通过</span>
|
||||
</a-menu-item>
|
||||
<a-menu-item key="2">
|
||||
<span href="javascript:void(0);">通过并回复</span>
|
||||
|
@ -20,10 +14,7 @@
|
|||
</a-menu>
|
||||
</a-dropdown>
|
||||
|
||||
<span
|
||||
v-else-if="comment.status === 'PUBLISHED'"
|
||||
@click="handleReplyClick"
|
||||
>回复</span>
|
||||
<span v-else-if="comment.status === 'PUBLISHED'" @click="handleReplyClick">回复</span>
|
||||
|
||||
<a-popconfirm
|
||||
v-else-if="comment.status === 'RECYCLE'"
|
||||
|
@ -45,38 +36,16 @@
|
|||
<span>回收站</span>
|
||||
</a-popconfirm>
|
||||
|
||||
<a-popconfirm
|
||||
:title="'你确定要永久删除该评论?'"
|
||||
@confirm="handleDeleteClick"
|
||||
okText="确定"
|
||||
cancelText="取消"
|
||||
>
|
||||
<a-popconfirm :title="'你确定要永久删除该评论?'" @confirm="handleDeleteClick" okText="确定" cancelText="取消">
|
||||
<span>删除</span>
|
||||
</a-popconfirm>
|
||||
|
||||
</template>
|
||||
<a
|
||||
slot="author"
|
||||
:href="comment.authorUrl"
|
||||
target="_blank"
|
||||
>
|
||||
<a-icon
|
||||
type="user"
|
||||
v-if="comment.isAdmin"
|
||||
style="margin-right: 3px;"
|
||||
/>
|
||||
{{ comment.author }}
|
||||
<a slot="author" :href="comment.authorUrl" target="_blank">
|
||||
<a-icon type="user" v-if="comment.isAdmin" style="margin-right: 3px;" />
|
||||
{{ comment.author }}-->{{ comment.id }}
|
||||
</a>
|
||||
<a-avatar
|
||||
size="large"
|
||||
slot="avatar"
|
||||
:src="avatar"
|
||||
:alt="comment.author"
|
||||
/>
|
||||
<p
|
||||
slot="content"
|
||||
v-html="content"
|
||||
></p>
|
||||
<a-avatar size="large" slot="avatar" :src="avatar" :alt="comment.author" />
|
||||
<p slot="content" v-html="content"></p>
|
||||
<a-tooltip slot="datetime">
|
||||
<span slot="title">{{ comment.createTime | moment }}</span>
|
||||
<span>{{ comment.createTime | timeAgo }}</span>
|
||||
|
@ -86,6 +55,8 @@
|
|||
v-for="(child, index) in comment.children"
|
||||
:key="index"
|
||||
:comment="child"
|
||||
v-on="$listeners"
|
||||
v-bind="$attrs"
|
||||
@reply="handleReplyClick"
|
||||
@delete="handleDeleteClick"
|
||||
@editStatus="handleEditStatusClick"
|
||||
|
@ -115,7 +86,6 @@ export default {
|
|||
},
|
||||
methods: {
|
||||
handleReplyClick() {
|
||||
console.log(this.comment)
|
||||
this.$emit('reply', this.comment)
|
||||
},
|
||||
handleEditStatusClick(status) {
|
||||
|
|
Loading…
Reference in New Issue