VUE3自定义文章排行榜的简单界面

文章目录

  • 一、代码展示
  • 二、代码解读
  • 三、结果展示

一、代码展示

<template><div class="article-ranking"><div class="header"><h2 class="title">{{ title }}</h2></div><div class="ranking-list"><div v-for="(article, index) in articles" :key="index" class="article-item"><div class="article-info"><h3 class="article-title">{{ truncateTitle(article.title, 25) }}</h3><p class="article-content">{{ truncateContent(article.summary, 50) }}</p><div class="details"><div class="info-row"><p class="info-text">时间: <span class="time">{{ formatPublishTime(article.createTime) }}</span> &nbsp;|&nbsp;浏览量: <span class="count">{{ formatViews(article.likeCount).formattedValue }}</span>
<!--               --></p></div></div></div><div class="divider"></div> <!-- 分隔线 --></div></div><div class="footer"><a @click="viewFullRanking" href="#" class="full-ranking-link">查看完整榜单</a></div></div>
</template><script setup>
import { defineProps } from 'vue';const props = defineProps(['title', 'articles']);const viewFullRanking = () => {console.log('View Full Ranking');
};const truncateContent = (content, maxLength) => {return content.length > maxLength ? content.substring(0, maxLength) + '...' : content;
};const truncateTitle = (title, maxLength) => {return title.length > maxLength ? title.substring(0, maxLength) + '...' : title;
};const formatPublishTime = (publishTime) => {const currentDate = new Date();const articleDate = new Date(publishTime);const timeDiff = currentDate - articleDate;const oneDay = 24 * 60 * 60 * 1000;const oneMonth = oneDay * 30;if (timeDiff < oneDay) {const hours = Math.floor(timeDiff / (60 * 60 * 1000));return `${hours}小时前`;} else if (timeDiff < oneMonth) {const days = Math.floor(timeDiff / oneDay);return `${days}天前`;} else {const months = Math.floor(timeDiff / oneMonth);return `${months}个月前`;}
};const formatAbbreviation = (value) => {if (value >= 10000) {return {formattedValue: Math.floor(value / 1000) + 'w+',isLargeCount: true,};} else {return {formattedValue: value,isLargeCount: false,};}
};const formatViews = (views) => formatAbbreviation(views);const formatLikes = (likes) => formatAbbreviation(likes);
</script><style scoped>
.article-ranking {width: 300px;border: 1px solid #ccc;border-radius: 8px;padding: 16px;margin: 16px;font-family: 'Arial', sans-serif;
}.article-title {font-size: 18px;margin-bottom: 8px;color: #333;text-align: left;  /* Align article title to the left */
}.article-content {font-size: 14px;color: #777;margin-bottom: 8px;overflow: hidden;text-overflow: ellipsis;white-space: nowrap;text-align: left;  /* Align article content to the left */
}.ranking-list {display: flex;flex-direction: column;
}.article-item {padding: 8px;
}.article-info {display: flex;flex-direction: column;
}.details {flex-grow: 1;
}.info-row {display: flex;flex-wrap: wrap;justify-content: space-between;
}.time {font-weight: bold;color: #1890ff;
}.count {font-weight: bold;color: #1890ff;
}.large-count {font-size: 12px; /* 调整较大计数的字体大小 */
}.divider {height: 1px;background-color: #ddd;margin: 8px 0;
}.footer {text-align: center;margin-top: 16px;
}.full-ranking-link {font-size: 14px;color: #1890ff;text-decoration: none;
}.full-ranking-link:hover {text-decoration: underline;
}
</style>

二、代码解读

  1. <template> 部分:

    • 整个模板包含一个名为 “article-ranking” 的 div,宽度为300像素,具有圆角边框和一些内外边距,呈现为一个简单的排行榜容器。
    • 模板包含标题(“header”)、排行列表(“ranking-list”)、文章项(“article-item”)、文章信息(“article-info”)、详细信息(“details”)、分隔线(“divider”)和页脚(“footer”)。
  2. <script setup> 部分:

    • 使用 import { defineProps } from 'vue'; 导入 defineProps 方法,以定义组件的属性。
    • 使用 defineProps(['title', 'articles']); 定义了两个属性:titlearticles
    • 定义了一个 viewFullRanking 方法,用于在点击 “查看完整榜单” 链接时输出一条日志。
    • 定义了 truncateContenttruncateTitle 方法,用于截断文章内容和标题,以确保它们不会超过指定的长度。
    • 定义了 formatPublishTime 方法,用于根据发布时间计算并返回相对于当前时间的时间差,以便显示多久前发布的文章。
    • 定义了 formatAbbreviation 方法,用于根据数值的大小返回格式化后的数值,并标记是否为较大的计数。
    • 定义了 formatViewsformatLikes 方法,这两个方法分别使用 formatAbbreviation 处理浏览量和点赞数。
  3. <style scoped> 部分:

    • 对排行榜容器及其子元素进行样式定义。
    • 调整了标题和文章内容的样式,使其居左对齐。
    • 使用了 flex 布局来组织文章项和详细信息。
    • 设置了一些通用的样式,如字体大小、颜色、边框等。
    • 使用了一些特定样式,如 divider 类,用于添加分隔线效果。
    • 样式中还包含了一些交互效果,如链接的鼠标悬停样式。

三、结果展示

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/710718.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

根据A(String)字段去重,并且选择B(Ingter)字段最大的值

数据格式&#xff1a; [SkillDTO(Job电线工, rankGrade高级工, r4), SkillDTO(Job监察员, rankGrade技师, r5), SkillDTO(Job监察员, rankGrade高级工, r4), SkillDTO(skillJob监察员, rankGrade中级工, r3)] List<SkillDTO> resultList SkillDTOList.stream().coll…

电子技术——PN结电流关系方程

电子技术——PN结电流关系方程 平衡状态下的PN结 平衡状态下的PN结界面总共有两种电流&#xff0c;一种为 扩散电流 另一种为 漂移电流 。两种电流形成的平衡区域称为 耗散区 。 在平衡状态扩散电流等于漂移电流&#xff0c;此时静电流为0&#xff0c;PN结外部没有电流&…

Java SPI:Service Provider Interface

SPI机制简介 SPI&#xff08;Service Provider Interface&#xff09;&#xff0c;是从JDK6开始引入的&#xff0c;一种基于ClassLoader来发现并加载服务的机制。 一个标准的SPI&#xff0c;由3个组件构成&#xff0c;分别是&#xff1a; Service&#xff1a;是一个公开的接口…

Java ElasticSearch面试题

Java ElasticSearch面试题 前言1、ElasticSearch是什么&#xff1f;2. 说说你们公司ES的集群架构&#xff0c;索引数据大小&#xff0c;分片有多少 &#xff1f;3. ES的倒排索引是什么&#xff1f;4. ES是如何实现 master 选举的?5. 描述一下 ES索引文档的过程&#xff1a;6、…

Centos系统(Linux)挂载硬盘/数据盘详细操作和开机自动挂载的两种方式

前提&#xff1a;已经做好磁盘阵列&#xff0c;将磁盘划分好 磁盘初始化操作步骤&#xff08;如果已经可以正常挂载可跳过)&#xff1a; 使用fdisk -l命令查看多出来的大容量的磁盘名称&#xff08;如果多块磁盘&#xff0c;查看需要挂载的磁盘名称&#xff09;&#xff0c;一…

embedding的原理和结构

embedding(向量化)是一个将数据转化为向量矩阵的过程&#xff0c;作用是&#xff1a;将高维稀疏向量转化为稠密向量&#xff0c;从而方便下游模型处理 简单的概念大家应该都知道了&#xff0c;以LLM为例 输入&#xff1a;文字 模型&#xff1a;embedding 输出&#xff1a;向量…

c++高精度乘法的原理及c++代码讲解

高精度乘法的原理主要是利用数学中乘法的基本原理&#xff0c;将大整数拆分成各个位数的相乘&#xff0c;然后累加得到最终结果。其过程如下&#xff1a; 将两个大整数相乘&#xff0c;从低位开始逐位相乘&#xff0c;得到部分乘积&#xff1b;将每一位的部分乘积相加&#xf…

【Emgu CV教程】7.8、图像锐化(增强)之同态滤波

文章目录 一、同态滤波大体原理二、代码三、效果举例 一、同态滤波大体原理 之前介绍的几个锐化、增强方法&#xff0c;包括更早之前介绍的图像模糊方法&#xff0c;都是基于空间域进行处理&#xff0c;也就是直接对目标点周边像素值进行各种数学运算。而这篇文章提到的同态滤…

学习计算机的好处

之前写了那么多计算机知识&#xff0c;却没有一篇写我学计算机的初衷。 掌握计算机技术不仅可以提高我们的就业能力和竞争力&#xff0c;同时有助于我们更好地认识世界&#xff0c;提高工作效率和解决问题的能力&#xff0c;更好地利用科技创造更美好的未来。 因此&#xff0c…

pyvisa库实现仪器控制

python控制仪器实现自动化常用pyvisa库&#xff0c;基本控制可大致分为创建仪器控制对象、写入控制指令、读取仪表信息和查询仪表状态&#xff0c;下面进行基本的讲解。 pyvisa库创建仪表控制对象 import tkinter.messagebox import pyvisaclass InstrumentControl:inst Non…

喜迎乔迁,开启新章 ▏易我科技新办公区乔迁庆典隆重举行

2024年1月18日&#xff0c;易我科技新办公区乔迁庆典在热烈而喜庆的氛围中隆重举行。新办公区的投入使用&#xff0c;标志着易我科技将以崭新姿态迈向新的发展阶段。 ▲ 易我科技新办公区 随着公司业务的不断发展和壮大&#xff0c;为了更好地适应公司发展的需要&#xff0c;…

2024-02-29(Flink)

1.Flink原理&#xff08;角色分工&#xff09; 2.Flink执行流程 on yarn版&#xff1a; 3.相关概念 1&#xff09;DataFlow&#xff1a;Flink程序在执行的时候会被映射成一个数据流模型&#xff1b; 2&#xff09;Operator&#xff1a;数据流模型中的每一个操作被称作Operat…

Spring Boot 高级实践探索:深度解读与实战演练

随着开发者对Spring Boot框架的基础运用日渐娴熟&#xff0c;迈向更深层次的技术探究和应用场景拓展显得尤为重要。本文将带领读者深入研究Spring Boot的若干核心进阶特性&#xff0c;并结合实际项目案例&#xff0c;涵盖自动化测试策略的深化应用、高级配置管理机制的巧妙运用…

Redis 之四:Redis 事务和乐观锁

事务特点 Redis 事务可以一次执行多个命令&#xff0c; 并且带有以下三个重要的保证&#xff1a; 批量操作在发送 EXEC 命令前被放入队列缓存。 收到 EXEC 命令后进入事务执行&#xff0c;事务中任意命令执行失败&#xff0c;其余的命令依然被执行。不具备原子性。 在事务执…

通讯录——C语言实现

头文件Contact.h #define _CRT_SECURE_NO_WARNINGS #include<stdio.h> #include<string.h> #include<stdlib.h> #pragma once #define MAX 100 #define MAX_NAME 20 #define MAX_SEX 5 #define MAX_TELE 12 #define MAX_ADDR 30//表示一个人的信息 //struct…

npm使用国内淘宝镜像的方法整理

命令配置安装&#xff1a; 淘宝镜像&#xff1a; npm config set registry https://registry.npm.taobao.org/ 官方镜像&#xff1a; npm config set registry https://registry.npmjs.org 通过cnpm安装&#xff1a; npm install -g cnpm --registryhttps://registry.npm.…

PTA L2-003 月饼 (附坑点说明)

月饼是中国人在中秋佳节时吃的一种传统食品&#xff0c;不同地区有许多不同风味的月饼。现给定所有种类月饼的库存量、总售价、以及市场的最大需求量&#xff0c;请你计算可以获得的最大收益是多少。 注意&#xff1a;销售时允许取出一部分库存。样例给出的情形是这样的&#…

如何在Java中反转字符串?

目录 1. 使用StringBuilder的reverse方法&#xff1a; 2. 使用for循环和字符数组&#xff1a; 3. 使用递归&#xff1a; 4. 使用Java 8的Stream API&#xff1a; More Java中&#xff0c;反转字符串可以通过多种方式实现。以下是一些常见的方法&#xff1a; 1. Java中使用…

【Python】PyGameUI控件

哈里前段时间写了一个windows平板上自娱自乐&#xff08;春节和家人一起玩&#xff09;基于pygame的大富翁游戏。 pygame没有按钮之类的UI控件&#xff0c;写起来不怎么顺手。就自己写一个简单的框架。 仓库地址 哈里PygameUi: pygame ui封装自用 (gitee.com) 使用示例 示…

上海亚商投顾:沪指终结月线6连阴 北向资金净买入超160亿

上海亚商投顾前言&#xff1a;无惧大盘涨跌&#xff0c;解密龙虎榜资金&#xff0c;跟踪一线游资和机构资金动向&#xff0c;识别短期热点和强势个股。 一.市场情绪 三大指数昨日低开高走&#xff0c;沪指重新站上3000点&#xff0c;深成指、创业板指大涨超3%。半导体产业链全…