🎨 评论组件优化
This commit is contained in:
ronger
parent
47d6d1223c
commit
ad73aab050
@ -44,14 +44,16 @@
|
||||
<el-col style="margin-left: 1rem;">
|
||||
<el-col v-show="comment.commentOriginalCommentId">
|
||||
<el-col :span="16">
|
||||
<el-link :underline="false" @click="onRouter('user', comment.commenter.userAccount)" class="text-default"
|
||||
<el-link :underline="false" @click="onRouter('user', comment.commenter.userAccount)"
|
||||
class="text-default"
|
||||
rel="nofollow">{{ comment.commenter.userNickname }}
|
||||
</el-link>
|
||||
<small class="text-default" style="margin: 0 0.2rem">回复了</small><span
|
||||
style="font-weight: bold;"> {{ comment.commentOriginalAuthorNickname }}</span>
|
||||
</el-col>
|
||||
<el-col :span="8" class="text-right" style="padding-right: 1rem;">
|
||||
<el-link :underline="false" @click.native="toggleShowOriginalComment(comment.commentOriginalCommentId)" rel="nofollow"
|
||||
<el-link :underline="false"
|
||||
@click.native="toggleShowOriginalComment(comment.commentOriginalCommentId)" rel="nofollow"
|
||||
title="查看原评论"><i
|
||||
class="el-icon-reading"></i> 查看原评论
|
||||
</el-link>
|
||||
@ -63,7 +65,8 @@
|
||||
</el-col>
|
||||
<el-col v-show="!comment.commentOriginalCommentId">
|
||||
<el-col :span="16">
|
||||
<el-link :underline="false" @click="onRouter('user', comment.commenter.userAccount)" class="text-default"
|
||||
<el-link :underline="false" @click="onRouter('user', comment.commenter.userAccount)"
|
||||
class="text-default"
|
||||
rel="nofollow">{{ comment.commenter.userNickname }}
|
||||
</el-link>
|
||||
</el-col>
|
||||
@ -92,7 +95,8 @@
|
||||
<el-col :sm="23" :xl="23" :xs="21" style="padding-bottom: 10px;" v-else>
|
||||
<el-col style="margin-left: 1rem;">
|
||||
<el-col :span="16">
|
||||
<el-link :underline="false" @click="onRouter('user', comment.commenter.userAccount)" class="text-default"
|
||||
<el-link :underline="false" @click="onRouter('user', comment.commenter.userAccount)"
|
||||
class="text-default"
|
||||
rel="nofollow">{{ comment.commenter.userNickname }}
|
||||
</el-link>
|
||||
</el-col>
|
||||
@ -115,7 +119,7 @@
|
||||
</el-col>
|
||||
</el-col>
|
||||
</el-card>
|
||||
<el-col :id="'original-' + comment.commentOriginalCommentId" style="background-color: #d9d9d9;padding-left: 1.5rem;
|
||||
<el-col v-if="comment.commentOriginalCommentId" :id="'original-' + comment.commentOriginalCommentId" style="background-color: #d9d9d9;padding-left: 1.5rem;
|
||||
margin-top: 0.3rem;border-radius: 0.5rem;cursor: pointer;display: none;">
|
||||
<el-col :span="2" v-show="comment.commentOriginalCommentId">
|
||||
<p>
|
||||
@ -144,18 +148,10 @@
|
||||
type: Boolean,
|
||||
default: false
|
||||
},
|
||||
user: {
|
||||
type: Object,
|
||||
default: false
|
||||
},
|
||||
authorId: {
|
||||
type: Number,
|
||||
default: false
|
||||
},
|
||||
avatar: {
|
||||
type: String,
|
||||
default: ''
|
||||
},
|
||||
title: {
|
||||
type: String,
|
||||
default: ''
|
||||
@ -165,6 +161,12 @@
|
||||
required: true
|
||||
}
|
||||
},
|
||||
fetch() {
|
||||
let {store} = this.$nuxt.context
|
||||
return Promise.all([
|
||||
store.dispatch('comment/fetchList', {post_id: this.postId})
|
||||
])
|
||||
},
|
||||
computed: {
|
||||
...mapState({
|
||||
comment: state => state.comment.data,
|
||||
@ -172,7 +174,9 @@
|
||||
isPostingComment: state => state.comment.posting,
|
||||
constants: state => state.global.constants,
|
||||
language: state => state.global.language,
|
||||
isMobile: state => state.global.isMobile
|
||||
isMobile: state => state.global.isMobile,
|
||||
user: state => state.auth.user,
|
||||
avatar: state => state.auth.user?.avatarUrl
|
||||
}),
|
||||
isFetching() {
|
||||
// 1. 宿主组件还在加载时，列表和 tool 都呈加载状态
|
||||
@ -357,17 +361,11 @@
|
||||
}
|
||||
_ts.contentEditor.setValue('');
|
||||
_ts.$set(_ts, 'drawer', false);
|
||||
_ts.getComments();
|
||||
_ts.$fetch()
|
||||
}
|
||||
_ts.$set(_ts, 'loading', false);
|
||||
})
|
||||
},
|
||||
getComments() {
|
||||
// 每次重新获取数据时都需要回到评论框顶部，因为都是新数据
|
||||
this.$store.dispatch('comment/fetchList', {
|
||||
post_id: this.postId
|
||||
})
|
||||
},
|
||||
gotoLogin() {
|
||||
this.$emit('gotoLogin');
|
||||
},
|
||||
@ -405,8 +403,8 @@
|
||||
// 评论渲染
|
||||
const previewElements = document.getElementsByClassName("comment-content");
|
||||
if (previewElements && previewElements.length > 0) {
|
||||
for (let i in previewElements) {
|
||||
let previewElement = previewElements[i];
|
||||
for (let i = 0; i<previewElements.length; i++) {
|
||||
const previewElement = previewElements[i];
|
||||
Vue.VditorPreview.codeRender(previewElement, 'zh_CN');
|
||||
Vue.VditorPreview.highlightRender({
|
||||
"enable": true,
|
||||
|
||||
@ -144,7 +144,7 @@
|
||||
</el-card>
|
||||
</el-col>
|
||||
<el-col>
|
||||
<comment-box :fetching="isFetching" :user="user" :avatar="avatar" :title="article.articleTitle"
|
||||
<comment-box :fetching="isFetching" :title="article.articleTitle"
|
||||
:post-id="routeArticleId" :authorId="article.articleAuthorId" @gotoLogin="gotoLogin"></comment-box>
|
||||
</el-col>
|
||||
<el-col>
|
||||
@ -179,12 +179,12 @@ export default {
|
||||
validate({params, store}) {
|
||||
return params.article_id && !isNaN(Number(params.article_id))
|
||||
},
|
||||
fetch({store, params, error}) {
|
||||
fetch() {
|
||||
let {store, params, error} = this.$nuxt.context
|
||||
return Promise.all([
|
||||
store
|
||||
.dispatch('article/fetchDetail', params)
|
||||
.catch(err => error({statusCode: 404})),
|
||||
store.dispatch('comment/fetchList', {post_id: params.article_id})
|
||||
.catch(err => error({statusCode: 404}))
|
||||
])
|
||||
},
|
||||
computed: {
|
||||
|
||||
@ -23,8 +23,6 @@ export default function ({app, $axios, store, redirect}) {
|
||||
Message.error(message ? message : '服务异常')
|
||||
} else if (response.data.code === 401) {
|
||||
app.$auth.logout()
|
||||
} else if (response.data.code === 402) {
|
||||
app.$auth.strategy.token.reset()
|
||||
} else if (response.data.code === 404) {
|
||||
Message.error('操作失败，请稍后再试......')
|
||||
} else if (response.data.code === 500) {
|
||||
|
||||
Loading…
Reference in New Issue
Block a user