peihaoyu/nebula
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

✨ 查看原评论功能

Browse Source
This commit is contained in:
x ronger 2020-09-29 17:36:42 +08:00
parent 475c1d8123
commit d8db0f2581
1 changed files with 32 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
components/common/comment/main.vue
View File

@ -32,9 +32,9 @@
<el-button type="primary" size="medium" @click="gotoLogin" plain>登录</el-button> <el-button type="primary" size="medium" @click="gotoLogin" plain>登录</el-button>
后发布评论 后发布评论
</el-col> </el-col>
<el-col style="margin-top: 1rem;"> <el-col>
<el-col v-for="comment in comment.data" :key="comment.idComment"> <el-col v-for="comment in comment.data" :key="comment.idComment">
<el-card style="margin-bottom: 0.5rem;" :id="'comment-' + comment.idComment"> <el-card style="margin-top: 1rem;" :id="'comment-' + comment.idComment">
<el-col :xs="3" :sm="1" :xl="1"> <el-col :xs="3" :sm="1" :xl="1">
<el-avatar v-show="comment.commenter.userAvatarURL" :src="comment.commenter.userAvatarURL"></el-avatar> <el-avatar v-show="comment.commenter.userAvatarURL" :src="comment.commenter.userAvatarURL"></el-avatar>
<el-avatar v-show="!comment.commenter.userAvatarURL" <el-avatar v-show="!comment.commenter.userAvatarURL"
@ -43,32 +43,49 @@
<el-col :xs="21" :sm="23" :xl="23"> <el-col :xs="21" :sm="23" :xl="23">
<el-col style="margin-left: 1rem;"> <el-col style="margin-left: 1rem;">
<el-col v-show="comment.commentOriginalCommentId"> <el-col v-show="comment.commentOriginalCommentId">
<el-col :span="16">
<el-link rel="nofollow" @click="onRouter('user', comment.commenter.userNickname)" :underline="false" <el-link rel="nofollow" @click="onRouter('user', comment.commenter.userNickname)" :underline="false"
class="text-default">{{ comment.commenter.userNickname }} class="text-default">{{ comment.commenter.userNickname }}
</el-link> </el-link>
<small class="text-default" style="margin: 0 0.2rem">回复了</small><span style="font-weight: bold;"> {{comment.commentOriginalAuthorNickname}}</span> <small class="text-default" style="margin: 0 0.2rem">回复了</small><span style="font-weight: bold;"> {{comment.commentOriginalAuthorNickname}}</span>
</el-col> </el-col>
<el-col :span="8" class="text-right" style="padding-right: 1rem;">
<el-link rel="nofollow" :underline="false" title="查看原评论"
@click.native="toggleShowOriginalComment(comment.commentOriginalCommentId)"><i
class="el-icon-reading"></i> 查看原评论</el-link>
</el-col>
</el-col>
<el-col v-show="!comment.commentOriginalCommentId"> <el-col v-show="!comment.commentOriginalCommentId">
<el-link rel="nofollow" @click="onRouter('user', comment.commenter.userNickname)" :underline="false" <el-link rel="nofollow" @click="onRouter('user', comment.commenter.userNickname)" :underline="false"
class="text-default">{{ comment.commenter.userNickname }} class="text-default">{{ comment.commenter.userNickname }}
</el-link> </el-link>
</el-col> </el-col>
</el-col> </el-col>
<el-col style="padding: 1rem;"> <el-col style="padding: 1rem;">
<el-col> <el-col>
<span v-html="comment.commentContent"></span> <span v-html="comment.commentContent"></span>
</el-col> </el-col>
</el-col> </el-col>
<el-col :span="22" style="padding-left: 1rem;"> <el-col :span="16" style="padding-left: 1rem;">
<el-link rel="nofollow" :underline="false" class="text-default">{{ comment.timeAgo }}</el-link> <el-link rel="nofollow" :underline="false" class="text-default">{{ comment.timeAgo }}</el-link>
</el-col> </el-col>
<el-col :span="2" v-if="user" class="text-right" style="margin-bottom: 0.5rem;"> <el-col :span="8" v-if="user" class="text-right" style="margin-bottom: 0.5rem;">
<el-link rel="nofollow" :underline="false" title="回复" @click.native="replyComment(comment)"><i <el-link rel="nofollow" :underline="false" title="评论" @click.native="replyComment(comment)"><i
class="el-icon-s-comment"></i></el-link> class="el-icon-s-comment"></i> 评论</el-link>
</el-col> </el-col>
</el-col> </el-col>
</el-card> </el-card>
<el-col :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 v-show="comment.commentOriginalCommentId" :span="2">
<p>
<span>{{comment.commentOriginalAuthorNickname}} :</span>
</p>
</el-col>
<el-col :span="20">
<div v-html="comment.commentOriginalContent"></div>
</el-col>
</el-col>
</el-col> </el-col>
</el-col> </el-col>
</el-col> </el-col>
@ -310,6 +327,14 @@
// 取消回复 // 取消回复
cancelCommentReply() { cancelCommentReply() {
this.commentOriginalCommentId = 0 this.commentOriginalCommentId = 0
},
toggleShowOriginalComment(commentId) {
let ele = document.getElementById('original-' + commentId);
if (ele.style.display === 'none') {
ele.style.display = 'block';
} else {
ele.style.display = 'none';
}
} }
}, },
async mounted() { async mounted() {