voson/publish
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix: enhance ArticleCard component to conditionally hide expand button and fade effect based on content height
All checks were successful
deploy / build-and-deploy (push) Successful in 54s
Details

Browse Source
This commit is contained in:
voson
2026-02-04 09:41:43 +08:00
parent 8019ebd226
commit ee87ae4fee
1 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

15
src/components/ArticleCard.astro
View File

@@ -51,12 +51,25 @@ const hasContent = Astro.slots.has('default');
if (!card) return;
const content = card.querySelector('[data-content]') as HTMLElement;
const contentInner = content?.querySelector('.content-inner') as HTMLElement;
const fade = card.querySelector('[data-fade]') as HTMLElement;
const btn = card.querySelector('[data-expand-btn]') as HTMLButtonElement;
const text = btn?.querySelector('[data-expand-text]');
const icon = btn?.querySelector('[data-expand-icon]') as SVGElement;
if (!content || !btn || !text || !icon) return;
if (!content || !contentInner || !btn || !text || !icon) return;
// 检查内容实际高度是否超过最大高度
const maxHeight = 800;
const actualHeight = contentInner.scrollHeight;
// 如果内容不超过最大高度，隐藏展开按钮和渐变效果
if (actualHeight <= maxHeight) {
content.style.maxHeight = 'none';
if (fade) fade.style.display = 'none';
btn.style.display = 'none';
return;
}
let isExpanded = false;