一、代碼展示

<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']); 定義了兩個屬性：title 和 articles。
   • 定義了一個 viewFullRanking 方法，用于在點擊 “查看完整榜單” 鏈接時輸出一條日志。
   • 定義了 truncateContent 和 truncateTitle 方法，用于截斷文章內容和標題，以確保它們不會超過指定的長度。
   • 定義了 formatPublishTime 方法，用于根據發布時間計算并返回相對于當前時間的時間差，以便顯示多久前發布的文章。
   • 定義了 formatAbbreviation 方法，用于根據數值的大小返回格式化后的數值，并標記是否為較大的計數。
   • 定義了 formatViews 和 formatLikes 方法，這兩個方法分別使用 formatAbbreviation 處理瀏覽量和點贊數。

3. <style scoped> 部分：

   • 對排行榜容器及其子元素進行樣式定義。
   • 調整了標題和文章內容的樣式，使其居左對齊。
   • 使用了 flex 布局來組織文章項和詳細信息。
   • 設置了一些通用的樣式，如字體大小、顏色、邊框等。
   • 使用了一些特定樣式，如 divider 類，用于添加分隔線效果。
   • 樣式中還包含了一些交互效果，如鏈接的鼠標懸停樣式。

三、結果展示