组件
概述
主题提供了一些具有通用性的组件，可以在任何地方使用。
<Badge /> badge
标签，用于在页面中增加一些提示信息。
Props
type- 类型：
'info' | 'tip' | 'warning' | 'danger' - 默认值：
'tip'
- 类型：
text- 类型：
string - 默认值：
''
- 类型：
输入：
- 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 - v2
- VuePress - v2
- VuePress - v2
- VuePress - v2
<Iconify />
支持 iconify 所有图标，支持通过 icon name 加载图标。
可在 iconify search 搜索图标使用。
Props
name- 类型：
string - 默认值：
''
- 类型：
color- 类型：
string - 默认值：
'currentColor'
- 类型：
size- 类型：
string - 默认值：
'1em'
- 类型：
输入：
- home - <Iconify name="material-symbols:home" color="currentColor" size="1em" />
- vscode - <Iconify name="skill-icons:vscode-dark" size="2em" />
- twitter - <Iconify name="skill-icons:twitter" size="2em" />输出：
- home -
- vscode -
- twitter -
<Plot />
“隐秘”文本 组件。
该组件默认不启用，你需要在 theme 配置中启用。
.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 - 描述：文本颜色
- 类型：
输入：
- 鼠标悬停 - <Plot>悬停时可见</Plot>
- 点击 - <Plot trigger="click">点击时可见</Plot>输出：
- 鼠标悬停 - 悬停时可见
- 点击 - 点击时可见