380 lines
13 KiB
Markdown
380 lines
13 KiB
Markdown
---
|
||
title: 组件
|
||
icon: radix-icons:component-2
|
||
createTime: 2024/03/06 09:42:42
|
||
outline: 2
|
||
permalink: /guide/features/component/
|
||
---
|
||
|
||
## 概述
|
||
|
||
VuePress 支持在 Markdown 文件中使用 组件。
|
||
|
||
主题提供了一些具有通用性的组件，可以在任何地方使用。
|
||
|
||
## 徽章 <Badge type="tip" text="badge" />
|
||
|
||
使用 `<Badge>` 组件来显示 行内信息，如状态或标签。
|
||
|
||
将你想显示的内容传递给 `<Badge>` 组件的 `text` 属性。
|
||
|
||
### Props
|
||
|
||
| 名称 | 类型 | 默认值 | 说明 |
|
||
| ------------ | -------- | ------------------ | ------------------------------------------------------------------ |
|
||
| type | `string` | `'tip'` | 类型，内置值: `'info' \| 'tip' \| 'warning' \| 'danger'`，允许自定义 |
|
||
| text | `string` | `''` | 文本 |
|
||
| color | `string` | `''` | 文本颜色 |
|
||
| bg-color | `string` | `''` | 背景颜色 |
|
||
| border-color | `string` | `'transparent'` | 边框颜色 |
|
||
|
||
**输入：**
|
||
|
||
```md :no-line-numbers
|
||
- VuePress - <Badge type="info" text="v2" />
|
||
- VuePress - <Badge type="tip" text="v2" />
|
||
- VuePress - <Badge type="warning" text="v2" />
|
||
- VuePress - <Badge type="danger" text="v2" />
|
||
- VuePress - <Badge text="v2" color="red" bg-color="#008c8c" />
|
||
```
|
||
|
||
**输出：**
|
||
|
||
- VuePress - <Badge type="info" text="v2" />
|
||
- VuePress - <Badge type="tip" text="v2" />
|
||
- VuePress - <Badge type="warning" text="v2" />
|
||
- VuePress - <Badge type="danger" text="v2" />
|
||
- VuePress - <Badge text="v2" color="red" bg-color="#008c8c" />
|
||
|
||
使用自定义`type`，可以实现更丰富的表现。
|
||
|
||
**输入：**
|
||
|
||
1. 在主题任意样式文件中，添加预定的样式：
|
||
|
||
```css
|
||
/* 浅色主题 */
|
||
.vp-badge.important {
|
||
color: #cccccc;
|
||
background-color: #f40f40;
|
||
border-color: transparent;
|
||
}
|
||
|
||
/* 深色主题 */
|
||
[data-theme="dark"] .vp-badge.important {
|
||
color: #f40f40;
|
||
background-color: #ffffff;
|
||
border-color: transparent;
|
||
}
|
||
|
||
/**
|
||
important 为自定义 type 类型
|
||
*/
|
||
```
|
||
|
||
2. 使用自定义`type`：
|
||
|
||
```md :no-line-numbers
|
||
- VuePress - <Badge type="important" text="v2" />
|
||
```
|
||
|
||
**输出：**
|
||
|
||
- VuePress - <Badge type="important" text="v2" />
|
||
|
||
## 图标
|
||
|
||
支持 iconify 所有图标，通过 icon name 加载图标。
|
||
|
||
可在 [iconify search](https://icon-sets.iconify.design/) 搜索图标使用。
|
||
|
||
### Props
|
||
|
||
| 名称 | 类型 | 默认值 | 说明 |
|
||
| ----- | ------ | ---------------- | -------- |
|
||
| name | string | `''` | 图标名 |
|
||
| color | string | `'currentcolor'` | 图标颜色 |
|
||
| size | string | `'1em'` | 图标大小 |
|
||
|
||
**输入：**
|
||
|
||
```md :no-line-numbers
|
||
- home - <Icon name="material-symbols:home" color="currentColor" size="1em" />
|
||
- vscode - <Icon name="skill-icons:vscode-dark" size="2em" />
|
||
- twitter - <Icon name="skill-icons:twitter" size="2em" />
|
||
```
|
||
|
||
**输出：**
|
||
|
||
- home - <Icon name="material-symbols:home" color="currentColor" size="1em" />
|
||
- vscode - <Icon name="skill-icons:vscode-dark" size="2em" />
|
||
- twitter - <Icon name="skill-icons:twitter" size="2em" />
|
||
|
||
## “隐秘”文本
|
||
|
||
使用 `<Plot>` 组件显示 [“隐秘”文本](../markdown/plot.md) ，能够更灵活的控制行为。
|
||
|
||
该组件默认不启用，你需要在 theme 配置中启用。
|
||
|
||
```ts title=".vuepress/config.ts"
|
||
export default defineUserConfig({
|
||
theme: plumeTheme({
|
||
plugins: {
|
||
markdownPower: {
|
||
plot: true,
|
||
},
|
||
}
|
||
})
|
||
})
|
||
```
|
||
|
||
### Props
|
||
|
||
| 名称 | 类型 | 默认值 | 说明 |
|
||
| ------- | ------------------------------------------- | --------- | -------------------------- |
|
||
| trigger | `'hover' \| 'click'` | `'hover'` | 鼠标悬停触发，或者点击触发 |
|
||
| mask | `string \| { light: string, dark: string }` | `#000` | 遮罩颜色 |
|
||
| color | `string \| { light: string, dark: string }` | `#fff` | 文本颜色 |
|
||
|
||
**输入：**
|
||
|
||
```md :no-line-numbers
|
||
- 鼠标悬停 - <Plot>悬停时可见</Plot>
|
||
- 点击 - <Plot trigger="click">点击时可见</Plot>
|
||
```
|
||
|
||
**输出：**
|
||
|
||
- 鼠标悬停 - <Plot>悬停时可见</Plot>
|
||
- 点击 - <Plot trigger="click">点击时可见</Plot>
|
||
|
||
## 卡片
|
||
|
||
使用 `<Card>` 组件在页面中显示卡片。
|
||
|
||
也可以使用 markdown [卡片容器](../markdown/card.md) 语法，替代 `<Card>` 组件。
|
||
|
||
### Props
|
||
|
||
| 名称 | 类型 | 默认值 | 说明 |
|
||
| ----- | --------------------------- | ------ | ---------------------------------------------------------------- |
|
||
| title | `string` | `''` | 标题 |
|
||
| icon | `string \| { svg: string }` | `''` | 显示在标题左侧的图标，支持 iconify 所有图标，也可以使用 图片链接 |
|
||
|
||
### 插槽
|
||
|
||
| 名称 | 说明 |
|
||
| ------- | ---------- |
|
||
| default | 卡片内容 |
|
||
| title | 自定义标题 |
|
||
|
||
**输入：**
|
||
|
||
```md :no-line-numbers
|
||
<Card title="卡片标题" icon="twemoji:astonished-face">
|
||
这里是卡片内容。
|
||
</Card>
|
||
|
||
<Card>
|
||
<template #title>
|
||
<p style="color: red">卡片标题</p>
|
||
</template>
|
||
这里是卡片内容。
|
||
</Card>
|
||
```
|
||
|
||
**输出：**
|
||
|
||
<Card title="卡片标题" icon="twemoji:astonished-face">
|
||
这里是卡片内容。
|
||
</Card>
|
||
|
||
<Card>
|
||
<template #title>
|
||
<p style="color: red;margin:0">卡片标题</p>
|
||
</template>
|
||
这里是卡片内容。
|
||
</Card>
|
||
|
||
## 链接卡片
|
||
|
||
使用 `<LinkCard>` 组件在页面中显示链接卡片。
|
||
|
||
### Props
|
||
|
||
| 名称 | 类型 | 默认值 | 说明 |
|
||
| ----------- | --------------------------- | ------ | ---------------------------------------------------------------- |
|
||
| title | `string` | `''` | 标题 |
|
||
| icon | `string \| { svg: string }` | `''` | 显示在标题左侧的图标，支持 iconify 所有图标，也可以使用 图片链接 |
|
||
| href | `string` | `''` | 链接 |
|
||
| description | `string` | `''` | 详情 |
|
||
|
||
### 插槽
|
||
|
||
| 名称 | 说明 |
|
||
| ------- | ------------ |
|
||
| default | 卡片详情内容 |
|
||
| title | 自定义标题 |
|
||
|
||
**输入：**
|
||
|
||
```md :no-line-numbers
|
||
<LinkCard title="卡片标题" href="/" description="这里是卡片内容" />
|
||
<LinkCard icon="twemoji:astonished-face" title="卡片标题" href="/" />
|
||
```
|
||
|
||
**输出：**
|
||
|
||
<LinkCard title="卡片标题" href="/" description="这里是卡片内容" />
|
||
<LinkCard icon="twemoji:astonished-face" title="卡片标题" href="/" />
|
||
|
||
## 图片卡片
|
||
|
||
使用 `<ImageCard>` 组件在页面中显示图片卡片。
|
||
|
||
图片卡片 有别于 markdown 的 普通插入图片方式，它展示与图片相关的更多信息，包括标题、描述、作者、链接等。
|
||
适用于如 摄影作品、设计作品、宣传海报 等场景。
|
||
|
||
### Props
|
||
|
||
| 名称 | 类型 | 默认值 | 说明 |
|
||
| ----------- | -------------------------- | ------ | --------------------------------------- |
|
||
| image | `string` | `''` | 必填，图片链接 |
|
||
| title | `string` | `''` | 可选，标题 (展示其它信息需要依赖此属性) |
|
||
| description | `string` | `''` | 可选，描述 |
|
||
| author | `string` | `''` | 可选，作者 |
|
||
| href | `string` | `''` | 可选，链接 |
|
||
| date | `string \| Date \| number` | `''` | 可选，日期 |
|
||
|
||
**输入：**
|
||
|
||
```md :no-line-numbers
|
||
<ImageCard
|
||
image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
|
||
title="阿尔凡齐纳灯塔，阿尔加维，葡萄牙"
|
||
description="今天照片中的灯塔位于葡萄牙南部海岸阿尔加维的卡沃埃罗。阿尔凡齐纳灯塔建于1919年，照耀着大海，帮助船只在该地区周围危险的水域航行。这座灯塔是著名的旅游胜地，同时也是该地区与海洋紧密联系的象征。如果你有幸住在灯塔附近，那么本周末就是拜访灯塔的最佳时机。"
|
||
href="/"
|
||
author="Andreas Kunz"
|
||
date="2024/08/16"
|
||
/>
|
||
```
|
||
|
||
**输出：**
|
||
|
||
<ImageCard
|
||
image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
|
||
title="阿尔凡齐纳灯塔，阿尔加维，葡萄牙"
|
||
description="今天照片中的灯塔位于葡萄牙南部海岸阿尔加维的卡沃埃罗。阿尔凡齐纳灯塔建于1919年，照耀着大海，帮助船只在该地区周围危险的水域航行。这座灯塔是著名的旅游胜地，同时也是该地区与海洋紧密联系的象征。如果你有幸住在灯塔附近，那么本周末就是拜访灯塔的最佳时机。"
|
||
href="/"
|
||
author="Andreas Kunz"
|
||
date="2024/08/16"
|
||
/>
|
||
|
||
还可以放到 `<CardGrid>` 组件中。
|
||
|
||
**输入：**
|
||
|
||
```md :no-line-numbers
|
||
<CardGrid>
|
||
<ImageCard
|
||
image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
|
||
title="阿尔凡齐纳灯塔，阿尔加维，葡萄牙"
|
||
description="..."
|
||
href="/"
|
||
author="Andreas Kunz"
|
||
date="2024/08/16"
|
||
/>
|
||
<ImageCard
|
||
image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
|
||
title="阿尔凡齐纳灯塔，阿尔加维，葡萄牙"
|
||
description="..."
|
||
href="/"
|
||
author="Andreas Kunz"
|
||
date="2024/08/16"
|
||
/>
|
||
</CardGrid>
|
||
```
|
||
|
||
**输出：**
|
||
|
||
<CardGrid>
|
||
<ImageCard
|
||
image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
|
||
title="阿尔凡齐纳灯塔，阿尔加维，葡萄牙"
|
||
description="今天照片中的灯塔位于葡萄牙南部海岸阿尔加维的卡沃埃罗。阿尔凡齐纳灯塔建于1919年，照耀着大海，帮助船只在该地区周围危险的水域航行。这座灯塔是著名的旅游胜地，同时也是该地区与海洋紧密联系的象征。如果你有幸住在灯塔附近，那么本周末就是拜访灯塔的最佳时机。"
|
||
href="/"
|
||
author="Andreas Kunz"
|
||
date="2024/08/16"
|
||
/>
|
||
<ImageCard
|
||
image="https://cn.bing.com/th?id=OHR.AlfanzinaLighthouse_ZH-CN9704515669_1920x1080.webp"
|
||
title="阿尔凡齐纳灯塔，阿尔加维，葡萄牙"
|
||
description="今天照片中的灯塔位于葡萄牙南部海岸阿尔加维的卡沃埃罗。阿尔凡齐纳灯塔建于1919年，照耀着大海，帮助船只在该地区周围危险的水域航行。这座灯塔是著名的旅游胜地，同时也是该地区与海洋紧密联系的象征。如果你有幸住在灯塔附近，那么本周末就是拜访灯塔的最佳时机。"
|
||
href="/"
|
||
author="Andreas Kunz"
|
||
date="2024/08/16"
|
||
/>
|
||
</CardGrid>
|
||
|
||
[查看 照片类作品示例](../../../../1.示例/照片类作品示例.md)
|
||
|
||
## 卡片排列容器
|
||
|
||
当你需要将多个卡片排列，可以使用 `<CardGrid>` 组件。在空间足够时，多个卡片会自动排列。
|
||
|
||
### Props
|
||
|
||
| 名称 | 类型 | 默认值 | 说明 |
|
||
| :--- | :----------------------------------------------- | :----- | :------------- |
|
||
| cols | `number \| Record<'sm' \| 'md' \| 'lg', number>` | `2` | 卡片排列列数。 |
|
||
|
||
**输入：**
|
||
|
||
```md :no-line-numbers
|
||
<CardGrid>
|
||
<Card title="卡片标题" icon="twemoji:astonished-face">
|
||
这里是卡片内容。
|
||
</Card>
|
||
<Card title="卡片标题" icon="twemoji:astonished-face">
|
||
这里是卡片内容。
|
||
</Card>
|
||
</CardGrid>
|
||
|
||
<CardGrid>
|
||
<LinkCard title="卡片标题" href="/" />
|
||
<LinkCard icon="twemoji:astonished-face" title="卡片标题" href="/" />
|
||
</CardGrid>
|
||
```
|
||
|
||
**输出：**
|
||
|
||
<CardGrid>
|
||
<Card title="卡片标题" icon="twemoji:astonished-face">
|
||
这里是卡片内容。
|
||
</Card>
|
||
<Card title="卡片标题" icon="twemoji:astonished-face">
|
||
这里是卡片内容。
|
||
</Card>
|
||
</CardGrid>
|
||
|
||
<CardGrid>
|
||
<LinkCard title="链接卡片" href="/" />
|
||
<LinkCard icon="twemoji:astonished-face" title="链接卡片" href="/" />
|
||
</CardGrid>
|
||
|
||
<style>
|
||
/* 浅色主题 */
|
||
.vp-badge.important {
|
||
color: #cccccc;
|
||
background-color: #f40f40;
|
||
border-color: transparent;
|
||
}
|
||
|
||
/* 深色主题 */
|
||
[data-theme="dark"] .vp-badge.important {
|
||
color: #f40f40;
|
||
background-color: #ffffff;
|
||
border-color: transparent;
|
||
}
|
||
</style>
|