Movk Nuxt Docs

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 指令：

:component-example{name="ButtonExample"}

高级配置

::component-example
---
name: AccordionExample
highlights: [10, 15, 20]
collapse: true
---
::

API

Props

Prop	Default	Type
`name`		`string`
`iframe`		`boolean \| { [key: string]: any; }` Whether to render the component in an iframe
`props`		`{ [key: string]: any; }`
`collapse`		`boolean \| { icon?: string; name?: string; openText?: string; closeText?: string; open?: boolean; }` Whether to collapse the code block
`options`		`{ alias?: string; name: string; label: string; items?: any[]; default: any; multiple?: boolean; }[]` A list of variable props to link to the component.
`highlights`		`number[]` A list of line numbers to highlight in the code block
`iframeMobile`	`false`	Whether to display the component in a mobile-sized iframe viewport
`prettier`		Whether to format the code with Prettier
`preview`		Whether to show the preview When `false`, the filename will be shown instead
`source`	`true`	Whether to show the source code
`overflowHidden`		`boolean` Whether to add overflow-hidden to wrapper

Slots

Slot	Type
`options`
`code`	`{}`

ComponentEmits

探索如何使用 `ComponentEmits` 组件自动为您的 Vue 组件生成事件（Emits）文档，清晰地呈现事件名称、参数和详细描述。

Accordion

本示例将向您展示如何运用 `component-example` 组件，创建一个具有交互功能的手风琴（Accordion）组件，并支持代码高亮和折叠等高级功能。