效果图:
评论组件:
<template>
<div class="comment-view">
<div v-show="isShowInput" id="commentForm" class="comment-form white-box">
<div class="form-box">
<el-input
ref="commentInput"
v-model="content"
type="textarea"
:rows="3"
:autofocus="true"
resize="none"
placeholder="请输入内容"
></el-input>
<el-button :loading="isLoading" :disabled="isLoading" class="primary" size="small" @click="commentSubmit">发布</el-button>
</div>
</div>
<div ref="commentCt" class="comment-ct white-box">
<div class="tit">
评论<span v-if="count">({
{ count }})</span>
</div>
<div class="comment-list">
<div v-for="(item, index) in commentList" :key="index" class="item">
<a class="left-avatar" :href="`/user/${item.memberId}`">
<el-image :src="item.avatar" fit="cover" class="avatar"></el-image>
</a>
<div class="right-info">
<div class="person">
<div class="name-time">
<a class="name" :href="`/user/${item.memberId}`">{
{ item.nickname }}</a>
<SvgIcon v-if="item.isExpert === 1" icon="auth"></SvgIcon>
<el-tag v-if="item.isAuthor === 1" color="#F3F3F3" type="info" size="mini">作者</el-tag>
<div class="time">{
{ item.releaseTime | dateFormat }}</div>
</div>
</div>
<div class="info">{
{ item.content }}</div>
<ItemOperation
:operStaus="[
{ icon: 'o-nice', key: 'giveCount', isOperate: true },
{ icon: 'o-comment', text: '回复', isOperate: true },
{ icon: 'o-report', text: '举报', isOperate: true },
]"
:data="item"
:type="5"
@handleComment="handleComment"
>
</ItemOperation>
<div v-if="formId === item.id" class="item-form-box">
<el-input v-model="formValue" :autofocus="true" :placeholder="formPlaceholder"></el-input>
<el-button
class="primary"
size="small"
:loading="isLoading"
:disabled="isLoading"
@click="replySubmit(item.id, item.memberId, 1)"
>发布</el-button>
</div>
<div class="children-list">
<div
v-for="(it, i) in item.children"
v-