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

2024-06-23 12:12
文章标签 javascript 组件 vue vue3 分享 评论 风格 frontend 一下 简约

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

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

预览

在这里插入图片描述

简介

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组件】分享一下自己写的简约风格评论区组件的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/1087120。

相关文章

Python中你不知道的gzip高级用法分享

Python中你不知道的gzip高级用法分享

《Python中你不知道的gzip高级用法分享》在当今大数据时代,数据存储和传输成本已成为每个开发者必须考虑的问题,Python内置的gzip模块提供了一种简单高效的解决方案,下面小编就来和大家详细讲... 目录前言：为什么数据压缩如此重要1. gzip 模块基础介绍2. 基本压缩与解压缩操作2.1 压缩文
阅读更多...
Go语言代码格式化的技巧分享

Go语言代码格式化的技巧分享

《Go语言代码格式化的技巧分享》在Go语言的开发过程中,代码格式化是一个看似细微却至关重要的环节,良好的代码格式化不仅能提升代码的可读性,还能促进团队协作,减少因代码风格差异引发的问题,Go在代码格式... 目录一、Go 语言代码格式化的重要性二、Go 语言代码格式化工具：gofmt 与 go fmt（一）
阅读更多...
前端如何通过nginx访问本地端口

前端如何通过nginx访问本地端口

《前端如何通过nginx访问本地端口》：本文主要介绍前端如何通过nginx访问本地端口的问题,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录一、nginx安装1、下载（1）下载地址（2）系统选择（3）版本选择2、安装部署（1）解压（2）配置文件修改（3）启动（4）
阅读更多...
HTML中meta标签的常见使用案例(示例详解)

HTML中meta标签的常见使用案例(示例详解)

《HTML中meta标签的常见使用案例(示例详解)》HTMLmeta标签用于提供文档元数据,涵盖字符编码、SEO优化、社交媒体集成、移动设备适配、浏览器控制及安全隐私设置,优化页面显示与搜索引擎索引... 目录html中meta标签的常见使用案例一、基础功能二、搜索引擎优化（seo）三、社交媒体集成四、移动
阅读更多...
HTML input 标签示例详解

HTML input 标签示例详解

《HTMLinput标签示例详解》input标签主要用于接收用户的输入，随type属性值的不同，变换其具体功能,本文通过实例图文并茂的形式给大家介绍HTMLinput标签，感兴趣的朋友一... 目录通用属性输入框单行文本输入框 text密码输入框 password数字输入框 number电子邮件输入编程框
阅读更多...
HTML img标签和超链接标签详细介绍

HTML img标签和超链接标签详细介绍

《HTMLimg标签和超链接标签详细介绍》：本文主要介绍了HTML中img标签的使用，包括src属性（指定图片路径）、相对/绝对路径区别、alt替代文本、title提示、宽高控制及边框设置等，详细内容请阅读本文，希望能对你有所帮助... 目录img 标签src 属性alt 属性title 属性width/h
阅读更多...
CSS3打造的现代交互式登录界面详细实现过程

CSS3打造的现代交互式登录界面详细实现过程

《CSS3打造的现代交互式登录界面详细实现过程》本文介绍CSS3和jQuery在登录界面设计中的应用,涵盖动画、选择器、自定义字体及盒模型技术,提升界面美观与交互性,同时优化性能和可访问性，感兴趣的朋... 目录1. css3用户登录界面设计概述1.1 用户界面设计的重要性1.2 CSS3的新特性与优势1.
阅读更多...
HTML5 中的＜button＞标签用法和特征

HTML5 中的＜button＞标签用法和特征

《HTML5中的＜button＞标签用法和特征》在HTML5中，button标签用于定义一个可点击的按钮，它是创建交互式网页的重要元素之一，本文将深入解析HTML5中的button标签，详细介绍其属... 目录引言<button> 标签的基本用法<button> 标签的属性typevaluedisabled
阅读更多...
HTML5实现的移动端购物车自动结算功能示例代码

HTML5实现的移动端购物车自动结算功能示例代码

《HTML5实现的移动端购物车自动结算功能示例代码》本文介绍HTML5实现移动端购物车自动结算,通过WebStorage、事件监听、DOM操作等技术,确保实时更新与数据同步,优化性能及无障碍性,提升用... 目录1. 移动端购物车自动结算概述2. 数据存储与状态保存机制2.1 浏览器端的数据存储方式2.1.
阅读更多...
基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

基于 HTML5 Canvas 实现图片旋转与下载功能(完整代码展示)

《基于HTML5Canvas实现图片旋转与下载功能(完整代码展示)》本文将深入剖析一段基于HTML5Canvas的代码，该代码实现了图片的旋转（90度和180度）以及旋转后图片的下载... 目录一、引言二、html 结构分析三、css 样式分析四、JavaScript 功能实现一、引言在 Web 开发中，
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2