ComponentExample
学习如何使用
ComponentExample 组件创建引人入胜的交互式组件示例，功能包括实时预览、源代码展示、代码高亮和折叠，以极大地提升文档的交互性和用户体验。用法
ComponentExample 用于在文档中嵌入可交互的组件示例。它会自动加载组件,并展示实时预览和源代码。
使用 此配置将
ComponentExample 前,需要在 nuxt.config.ts 中配置示例组件目录,以确保组件被全局注册:import { createResolver } from '@nuxt/kit'
const { resolve } = createResolver(import.meta.url)
export default defineNuxtConfig({
modules: [
(_, nuxt) => {
nuxt.hook('components:dirs', (dirs) => {
dirs.unshift({
path: resolve('./app/components/content/examples'),
pathPrefix: false,
prefix: '',
global: true
})
})
}
]
})
./app/components/content/examples 目录下的所有组件注册为全局组件,使 ComponentExample 能够动态加载它们。基本用法
在您的 Markdown 文档中使用 ::component-example 指令：
md
:component-example{name="ButtonExample"}
高级配置
md
::component-example
---
name: AccordionExample
highlights: [10, 15, 20]
collapse: true
---
::
API
Props
| Prop | Default | Type |
|---|---|---|
name | string | |
iframe | false | boolean | { [key: string]: any; }是否在 iframe 中渲染组件 |
props | { [key: string]: any; } | |
collapse | false | boolean | { icon?: string; name?: string; openText?: string; closeText?: string; open?: boolean; }是否折叠代码块
|
options | { alias?: string; name: string; label: string; items?: any[]; default: any; multiple?: boolean; }[]链接到组件的可变属性列表 | |
highlights | number[]代码块中需要高亮的行号列表 | |
iframeMobile | false | boolean是否在移动端尺寸的 iframe 视口中显示组件 |
prettier | false | boolean是否使用 Prettier 格式化代码 |
preview | true | boolean是否显示预览
当设置为 |
source | true | boolean是否显示源代码 |
overflowHidden | boolean是否在包装器上添加 overflow-hidden |
Slots
| Slot | Type |
|---|---|
options | {} |
code | {} |