feat(article): 文章详情页导航栏显示动态文章标题
- 将 NavHeader 的 title 从固定"文章详情"改为动态绑定 - 新增 displayTitle 计算属性,支持标题过长时自动截断(15 字符 + 省略号) - 加载中/失败时仍显示默认"文章详情"文案 Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Showing
1 changed file
with
18 additions
and
1 deletions
| ... | @@ -5,7 +5,7 @@ | ... | @@ -5,7 +5,7 @@ |
| 5 | <template> | 5 | <template> |
| 6 | <view class="article-detail-page"> | 6 | <view class="article-detail-page"> |
| 7 | <!-- 导航栏 --> | 7 | <!-- 导航栏 --> |
| 8 | - <NavHeader title="文章详情" /> | 8 | + <NavHeader :title="displayTitle" /> |
| 9 | 9 | ||
| 10 | <!-- 滚动容器 --> | 10 | <!-- 滚动容器 --> |
| 11 | <view class="flex-1 pb-safe"> | 11 | <view class="flex-1 pb-safe"> |
| ... | @@ -126,6 +126,23 @@ const formattedDate = computed(() => { | ... | @@ -126,6 +126,23 @@ const formattedDate = computed(() => { |
| 126 | }) | 126 | }) |
| 127 | 127 | ||
| 128 | /** | 128 | /** |
| 129 | + * 导航栏显示标题(截断过长标题) | ||
| 130 | + * | ||
| 131 | + * @description 最多显示 15 个字符,超过则添加省略号 | ||
| 132 | + */ | ||
| 133 | +const displayTitle = computed(() => { | ||
| 134 | + // 加载中或加载失败时显示默认标题 | ||
| 135 | + if (!article.value?.title) return '文章详情' | ||
| 136 | + | ||
| 137 | + const MAX_LENGTH = 15 | ||
| 138 | + const title = article.value.title.trim() | ||
| 139 | + | ||
| 140 | + return title.length > MAX_LENGTH | ||
| 141 | + ? title.slice(0, MAX_LENGTH) + '...' | ||
| 142 | + : title | ||
| 143 | +}) | ||
| 144 | + | ||
| 145 | +/** | ||
| 129 | * 获取文章详情 | 146 | * 获取文章详情 |
| 130 | */ | 147 | */ |
| 131 | const fetchArticleDetail = async () => { | 148 | const fetchArticleDetail = async () => { | ... | ... |
-
Please register or login to post a comment