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

文章目录

一、代码展示

html 复制代码
<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 类,用于添加分隔线效果。
    • 样式中还包含了一些交互效果,如链接的鼠标悬停样式。

三、结果展示

相关推荐
真的很上进3 分钟前
如何借助 Babel+TS+ESLint 构建现代 JS 工程环境?
java·前端·javascript·css·react.js·vue·html
web130933203989 分钟前
vue elementUI form组件动态添加el-form-item并且动态添加rules必填项校验方法
前端·vue.js·elementui
NiNg_1_23430 分钟前
Echarts连接数据库,实时绘制图表详解
前端·数据库·echarts
如若1231 小时前
对文件内的文件名生成目录,方便查阅
java·前端·python
滚雪球~2 小时前
npm error code ETIMEDOUT
前端·npm·node.js
沙漏无语2 小时前
npm : 无法加载文件 D:\Nodejs\node_global\npm.ps1,因为在此系统上禁止运行脚本
前端·npm·node.js
supermapsupport2 小时前
iClient3D for Cesium在Vue中快速实现场景卷帘
前端·vue.js·3d·cesium·supermap
brrdg_sefg2 小时前
WEB 漏洞 - 文件包含漏洞深度解析
前端·网络·安全
胡西风_foxww2 小时前
【es6复习笔记】rest参数(7)
前端·笔记·es6·参数·rest
m0_748254882 小时前
vue+elementui实现下拉表格多选+搜索+分页+回显+全选2.0
前端·vue.js·elementui