代码比较简单，方便大家二次开发，旨在快速提供基础的样式模板，自行迭代定制
预览
简介
-
通用评论组件
-
组件功能
- 此组件旨在创建一个具备嵌套回复能力的通用评论区域，适用于构建动态、互动性强的用户讨论场景。
-
接收数据结构
- 组件通过 Props 接收数据，数据模型设计详细描述了评论及其嵌套回复的所有必要信息。
@property {Array<Comment>} data- 评论列表-
Comment类型定义 -
- userImg: string - 用户头像URL
-
- userName: string - 用户名
-
- time: string - 评论时间戳（如 “17小时前”）
-
- content: string - 评论内容
-
- ReplyData: Array - 子评论集合
-
Reply类型定义 -
- userImg1: string - 回复者头像URL
-
- userName1: string - 回复者用户名
-
- userImg2: string - 被回复者头像URL（可选）
-
- userName2: string - 被回复者用户名（可选）
-
- replytime: string - 回复时间
-
- replycontent: string - 回复内容
-
- anthTags: number - 回复者身份标识
-
0: 无特殊身份
-
1: 回复者为原贴作者
-
2: 被回复者为原贴作者
-
示例数据说明
- 提供的数据结构实例展示了如何组织顶级评论及其关联的回复数据，以便于组件正确解析并渲染。
data = [
{
userImg:'',
userName:"比克",
time:'17小时前',
content:"这生成的真不错呀！",
ReplyData:[
{
userImg1:'',
userName1:'比克大魔王',
userImg2:'',
userName2:'后方之水',
replytime:'6小时前',
replycontent:'哈哈哈,多谢夸奖!',
anthTags:1
},
{
userImg1:'',
userName1:'后方之水',
userImg2:'',
userName2:'比克大魔王',
replytime:'6小时前',
replycontent:'我也要生成同款',
anthTags:2
},
]
}
]
代码
父组件
<template>
<div class="firstglobals">
<div class="avatar">
<img :src="data.userImg" style="width: 56px; height: 56px; border-radius: 50%;" alt="" />
</div>
<div class="content">
<div class="usertop">
<div class="username">{{ data.userName }}</div>
<div class="time">{{ data.time }}</div>
</div>
<div style="display: flex; flex-direction: column; margin-top: 1em;">
<div class="text">{{ data.content }}</div>
<div style="display: flex; align-self: flex-end;">
<img src="@/assets/globals/点赞默认.png" style="width: 20px;" alt="" />
</div>
<div class="but">回复</div>
</div>
<div>
<div v-for="(item, index) in displayedReplies" :key="index">
<LuxCommentSectionItem :replyData="item" />
</div>
<div v-if="!showAllReplies && data.ReplyData.length > 2" class="load-more"
@click="showAllReplies = true">
加载更多回复 ...
</div>
</div>
</div>
</div>
</template>
<script setup lang="ts">
import { ref, computed } from 'vue';
import LuxCommentSectionItem from '@/components/currency/LuxCommentSectionItem.vue';
interface ReplyData {
userImg1:string,
userName1:string,
userImg2:string,
userName2:string,
replytime:string,
replycontent:string,
anthTags:number
}
interface CommentData {
userImg: string;
userName: string;
time: string;
content: string;
ReplyData: ReplyData[];
}
const props = defineProps<{
data: CommentData;
}>();
const showAllReplies = ref(false);
const displayedReplies = computed(() => {
if (showAllReplies.value || props.data.ReplyData.length <= 2) {
return props.data.ReplyData;
} else {
return props.data.ReplyData.slice(0, 2);
}
});
</script>
<style scoped>
.but {
width: 60px;
padding: 5px 0px;
background: #f1f1f1;
border-radius: 4px;
display: flex;
justify-content: center;
align-content: center;
font-weight: 400;
font-size: 14px;
color: #0f1014;
text-align: left;
font-style: normal;
text-transform: none;
}
.but:hover {
background: #ebe4e4;
}
.text {
font-weight: 400;
font-size: 18px;
color: #000000;
line-height: 21px;
text-align: left;
font-style: normal;
text-transform: none;
}
.time {
font-weight: 400;
font-size: 12px;
color: #666666;
line-height: 14px;
text-align: left;
font-style: normal;
text-transform: none;
}
.avatar {
width: 56px;
height: 56px;
border-radius: 30px;
}
.usertop {
display: flex;
flex-direction: column;
gap: 5px;
}
.username {
font-weight: 700;
font-size: 16px;
color: #0f1014;
line-height: 19px;
text-align: left;
font-style: normal;
text-transform: none;
}
.content {
display: flex;
flex-direction: column;
margin-left: 1em;
margin-top: 10px;
flex: 1;
}
.firstglobals {
display: flex;
justify-content: start;
margin-top: 2em;
}
.load-more {
margin-top: 30px;
margin-left: 2em;
color: #0066cc;
cursor: pointer;
font-size: 14px;
font-size: 14px;
cursor: pointer;
}
.load-more:hover {
text-decoration: underline;
}
</style>
子组件
<template>
<div class="reply-comments">
<div class="top-user">
<div style="display: flex;
justify-content: center;align-content: center;gap: 8px;">
<img :src="replyData.userImg1" style="width: 24px;height: 24px;border-radius: 50%;" alt="">
<span class="username">{{ replyData.userName1 }}</span>
</div>
<div class="tags" v-if="replyData.anthTags === 1">
作者
</div>
<div class="hf">
回复
</div>
<div style="display: flex;
justify-content: center;align-content: center;gap: 8px;">
<img :src="replyData.userImg2" style="width: 24px;height: 24px;border-radius: 50%;" alt="">
<span class="username">{{ replyData.userName2 }}</span>
</div>
<div class="tags" v-if="replyData.anthTags === 2">
作者
</div>
<div class="time">
{{ replyData.replytime }}
</div>
</div>
<div class="content">
{{ replyData.replycontent }}
</div>
<div style="display: flex;align-self: flex-end;">
<img src="@/assets/globals/点赞默认.png" style="width: 20px;" alt="">
</div>
<div class="but">
回复
</div>
</div>
</template>
<script setup lang="ts">
interface ReplyData {
userImg1: string,
userName1: string,
userImg2: string,
userName2: string,
replytime: string,
replycontent: string,
anthTags: number
}
const props = defineProps<{
replyData: ReplyData
}>();
</script>
<style scoped>
.but {
width: 60px;
/* height: 28px; */
padding: 5px 0px;
background: #F1F1F1;
border-radius: 4px 4px 4px 4px;
display: flex;
justify-content: center;
align-content: center;
font-weight: 400;
font-size: 14px;
color: #0F1014;
/* line-height: 16px; */
text-align: left;
font-style: normal;
text-transform: none;
margin-left: 32px;
}
.but:hover {
background: #ebe4e4;
}
.content {
font-weight: 400;
font-size: 18px;
color: #000000;
line-height: 21px;
text-align: left;
font-style: normal;
text-transform: none;
margin-left: 32px;
margin-top: 10px;
}
.time {
font-weight: 400;
font-size: 12px;
color: #666666;
line-height: 14px;
text-align: left;
font-style: normal;
text-transform: none;
}
.hf {
font-weight: 400;
font-size: 14px;
color: #B9B9B9;
line-height: 16px;
text-align: left;
font-style: normal;
text-transform: none;
}
.tags {
width: 32px;
height: 18px;
background: #0F1014;
border-radius: 4px 4px 4px 4px;
color: #fff;
font-weight: 400;
font-size: 10px;
color: #FFFFFF;
line-height: 12px;
text-align: center;
font-style: normal;
text-transform: none;
flex-wrap: wrap;
display: flex;
justify-content: center;
align-items: center;
}
.username {
height: 24px;
font-weight: 500;
font-size: 13px;
color: #0F1014;
line-height: 15px;
text-align: left;
font-style: normal;
text-transform: none;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
}
.top-user {
display: flex;
align-items: center;
/* flex-wrap: wrap; */
gap: 8px;
}
.reply-comments {
display: flex;
flex-direction: column;
margin-top: 1em;
}
</style>
