ComponentExample
学习如何使用
ComponentExample 组件创建引人入胜的交互式组件示例，功能包括实时预览、源代码展示、代码高亮和折叠，以极大地提升文档的交互性和用户体验。用法
ComponentExample 用于在文档中嵌入可交互的组件示例。它会自动加载组件,并展示实时预览和源代码。
使用 此配置将
ComponentExample 前,需要在 nuxt.config.ts 中配置示例组件目录,以确保组件被全局注册:必须安装 @nuxt/kit：pnpm add @nuxt/kit
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 指令：
<script setup lang="ts">
import type { AccordionItem } from '@nuxt/ui'
const items = [
{
label: 'Icons',
icon: 'i-lucide-smile',
content: 'You have nothing to do, @nuxt/icon will handle it automatically.'
},
{
label: 'Colors',
icon: 'i-lucide-swatch-book',
slot: 'colors' as const,
content: 'Choose a primary and a neutral color from your Tailwind CSS theme.'
},
{
label: 'Components',
icon: 'i-lucide-box',
content: 'You can customize components by using the `class` / `ui` props or in your app.config.ts.'
}
] satisfies AccordionItem[]
</script>
<template>
<UAccordion :items="items">
<template #colors="{ item }">
<p class="text-sm pb-3.5 text-primary">
{{ item.content }}
</p>
</template>
</UAccordion>
</template>
:component-example{name="AccordionExample"}
高级配置
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 | {} |