【Vue3组件】分享一下自己写的简约风格评论区组件

本文主要是介绍【Vue3组件】分享一下自己写的简约风格评论区组件，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

---

代码比较简单，方便大家二次开发，旨在快速提供基础的样式模板，自行迭代定制

---

预览

---

简介

• 通用评论组件

• 组件功能

• 此组件旨在创建一个具备嵌套回复能力的通用评论区域，适用于构建动态、互动性强的用户讨论场景。

• 接收数据结构

• 组件通过 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},]}]

• 使用提示

• • 确认传递给组件的数据严格遵循上述结构，以确保界面的正确显示。
• • 利用Vue 3的Composition API特性，可以进一步优化状态管理和逻辑处理。

---

代码

父组件

<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>

这篇关于【Vue3组件】分享一下自己写的简约风格评论区组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---