---
url: /components/article-card.md
---
# ArticleCard 文章卡

`EvArticleCard` 展示博客文章、公司动态或教程条目：封面（缺省为图标占位底）+ 日期与标签
元信息 + 两行截断的标题与摘要。`tag="a"` 整卡可点击，配合多列 grid 构成博客列表页。

## 基础用法

```vue
<EvArticleCard
  title="从 0 到 1 搭建团队知识库"
  excerpt="…"
  date="2026-09-01"
  :tags="['最佳实践']"
  icon="brush-line"
  tag="a"
  href="/blog/1"
/>
```

## API

### Props

| 属性 | 说明 | 类型 | 默认值 |
| --- | --- | --- | --- |
| title | 标题（最多两行截断） | string | — |
| excerpt | 摘要（最多两行截断） | string | — |
| cover | 封面图地址 | string | — |
| icon | 无封面时的占位图标 | string | `'compass-3-line'` |
| date | 日期文案 | string | — |
| tags | 标签列表 | string\[] | `[]` |
| href | 链接地址（tag 为 `'a'` 时生效） | string | — |
| tag | 渲染标签 | string | `'article'` |
| hoverable | 悬浮上浮 + 封面缩放 | boolean | `true` |
| glass | 磨砂玻璃质感；缺省跟随全局（ConfigProvider glass） | boolean | — |
| blur | 磨砂强度（px），内联覆盖 `--ev-glass-blur` | string / number | — |
| saturate | 磨砂饱和度（倍数），内联覆盖 `--ev-glass-saturate` | string / number | — |
| tint | 磨砂底色浓度（%），内联覆盖 `--ev-glass-bg` | string / number | — |

### 插槽

| 插槽 | 说明 |
| --- | --- |
| title / excerpt | 标题/摘要覆写 |