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