83 lines
2.0 KiB
Markdown
83 lines
2.0 KiB
Markdown
---
|
|
title: 常用组件
|
|
description: 常用自定义组件速查文档
|
|
navigation:
|
|
icon: lucide-component
|
|
---
|
|
|
|
|
|
|
|
:::code-group
|
|
```mdc [index.md]
|
|
::callout
|
|
---
|
|
icon: simple-icons-visualstudiocode
|
|
to: https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc
|
|
---
|
|
安装 **MDC VS Code 扩展**，以获得对 MDC 语法的高亮显示支持。
|
|
::
|
|
```
|
|
|
|
::::code-preview{icon="i-lucide-eye" label="Preview"}
|
|
::callout
|
|
---
|
|
icon: simple-icons-visualstudiocode
|
|
to: https://marketplace.visualstudio.com/items?itemName=Nuxt.mdc
|
|
---
|
|
安装 **MDC VS Code 扩展**，以获得对 MDC 语法的高亮显示支持。
|
|
::
|
|
::::
|
|
:::
|
|
|
|
|
|
|
|
::tip
|
|
在 tip 标签中嵌套 code-group 的示例. 可以直接复制index.md 中的内容,既是 当前展示 的效果.
|
|
|
|
:::code-group
|
|
```mdc [index.md]
|
|
::tip
|
|
在文档中使用自定义组件时，可以在插槽中使用 Markdown 语法，组件会自动渲染 Markdown 内容。
|
|
|
|
:::code-group
|
|
```mdc [index.md]
|
|
::my-title
|
|
A [rich text](/) will be **rendered** by the component.
|
|
::
|
|
```
|
|
|
|
```html [MyTitle.vue]
|
|
<template>
|
|
<h1 class="text-4xl">
|
|
<slot mdc-unwrap="p" />
|
|
</h1>
|
|
</template>
|
|
```
|
|
|
|
::::code-preview{icon="i-lucide-eye" label="Preview"}
|
|
:::::example-title
|
|
A [rich text](/) will be **rendered** by the component.
|
|
:::::
|
|
::::
|
|
:::
|
|
::
|
|
```
|
|
|
|
```html [MyTitle.vue]
|
|
<template>
|
|
<h1 class="text-4xl">
|
|
<slot mdc-unwrap="p" />
|
|
</h1>
|
|
</template>
|
|
```
|
|
|
|
::::code-preview{icon="i-lucide-eye" label="Preview"}
|
|
:::::example-title
|
|
A [rich text](/) will be **rendered** by the component.
|
|
:::::
|
|
::::
|
|
:::
|
|
::
|
|
|
|
|