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

三、结果展示

相关推荐
fruge2 分钟前
纯css制作声波扩散动画、js+css3波纹催眠动画特效、【css3动画】圆波扩散效果、雷达光波效果完整代码
javascript·css·css3
neter.asia10 分钟前
vue中如何关闭eslint检测?
前端·javascript·vue.js
~甲壳虫11 分钟前
说说webpack中常见的Plugin?解决了什么问题?
前端·webpack·node.js
光影少年30 分钟前
vue2与vue3的全局通信插件,如何实现自定义的插件
前端·javascript·vue.js
As977_31 分钟前
前端学习Day12 CSS盒子的定位(相对定位篇“附练习”)
前端·css·学习
susu108301891133 分钟前
vue3 css的样式如果background没有,如何覆盖有background的样式
前端·css
Ocean☾35 分钟前
前端基础-html-注册界面
前端·算法·html
Rattenking35 分钟前
React 源码学习01 ---- React.Children.map 的实现与应用
javascript·学习·react.js
Dragon Wu37 分钟前
前端 Canvas 绘画 总结
前端
CodeToGym41 分钟前
Webpack性能优化指南:从构建到部署的全方位策略
前端·webpack·性能优化