feat: support render markdown in Comment Drawer.

pull/59/head
ruibaby 2019-11-29 20:56:01 +08:00
parent 7ce36abc63
commit 9bd3d37a24
7 changed files with 24 additions and 6 deletions

View File

@ -597,6 +597,9 @@ body {
p { p {
margin-top: 1rem; margin-top: 1rem;
margin-bottom: 0; margin-bottom: 0;
img {
width: 100%;
}
} }
} }
} }

View File

@ -22,7 +22,7 @@
:sm="24" :sm="24"
> >
<a-form-item label="关键词"> <a-form-item label="关键词">
<a-input v-model="queryParam.keyword" /> <a-input v-model="queryParam.keyword" @keyup.enter="handleQuery()"/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col <a-col

View File

@ -12,7 +12,7 @@
:sm="24" :sm="24"
> >
<a-form-item label="关键词"> <a-form-item label="关键词">
<a-input v-model="queryParam.keyword" /> <a-input v-model="queryParam.keyword" @keyup.enter="handleQuery()"/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col <a-col

View File

@ -25,7 +25,7 @@
<a-empty v-if="comments.length==0" /> <a-empty v-if="comments.length==0" />
<TargetCommentTree <TargetCommentTree
v-else v-else
v-for="(comment, index) in comments" v-for="(comment, index) in formattedComments"
:key="index" :key="index"
:comment="comment" :comment="comment"
@reply="handleCommentReply" @reply="handleCommentReply"
@ -48,6 +48,7 @@
import { mixin, mixinDevice } from '@/utils/mixin.js' import { mixin, mixinDevice } from '@/utils/mixin.js'
import TargetCommentTree from './TargetCommentTree' import TargetCommentTree from './TargetCommentTree'
import commentApi from '@/api/comment' import commentApi from '@/api/comment'
import marked from 'marked'
export default { export default {
name: 'TargetCommentDrawer', name: 'TargetCommentDrawer',
mixins: [mixin, mixinDevice], mixins: [mixin, mixinDevice],
@ -104,6 +105,14 @@ export default {
} }
} }
}, },
computed: {
formattedComments() {
return this.comments.map(comment => {
comment.content = marked(comment.content, { sanitize: true })
return comment
})
}
},
methods: { methods: {
loadComments() { loadComments() {
this.queryParam.page = this.pagination.page - 1 this.queryParam.page = this.pagination.page - 1
@ -123,6 +132,12 @@ export default {
handleCommentDelete() {}, handleCommentDelete() {},
onClose() { onClose() {
this.comments = []
this.pagination = {
page: 1,
size: 10,
sort: ''
}
this.$emit('close', false) this.$emit('close', false)
} }
} }

View File

@ -18,7 +18,7 @@
:src="avatar" :src="avatar"
:alt="comment.author" :alt="comment.author"
/> />
<p slot="content">{{ comment.content }}</p> <p slot="content" v-html="comment.content"></p>
<template v-if="comment.children"> <template v-if="comment.children">
<TargetCommentTree <TargetCommentTree
v-for="(child, index) in comment.children" v-for="(child, index) in comment.children"

View File

@ -12,7 +12,7 @@
:sm="24" :sm="24"
> >
<a-form-item label="关键词"> <a-form-item label="关键词">
<a-input v-model="queryParam.keyword" /> <a-input v-model="queryParam.keyword" @keyup.enter="handleQuery()"/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col <a-col

View File

@ -14,7 +14,7 @@
:sm="24" :sm="24"
> >
<a-form-item label="关键词"> <a-form-item label="关键词">
<a-input v-model="queryParam.keyword" /> <a-input v-model="queryParam.keyword" @keyup.enter="handleQuery()"/>
</a-form-item> </a-form-item>
</a-col> </a-col>
<a-col <a-col