---
title: Usage演示
description: 用于组件配置项预览，用于组件库文档。
isComponent: true
---

## 使用

要开启该功能只需在`markdown`文件头部添加`isComponent: true`，该演示面板会自动显示在页面最顶部，

下面还需要在当前markdown文件新建两个文件`_usage/index.vue`和`_usage/config.ts`。

``` html
<template>
  <common-usage
    :code="usageCode"
    :config-list="configList"
    @panel-change="onPanelChange"
  >
    <template #button="{configProps}">
      <button v-bind="configProps">按钮</button>
    </template>
    <template #buttonGroup="{configProps}">
      <input v-bind="configProps"/>
    </template>
  </common-usage>
</template>
<script lang="ts" setup>
import { ref, computed, Ref } from 'vue';
import {configJson} from './props'

const configList = computed(() => configJson)

const usageCodeMap = {
  button: '<button v-bind="configProps">按钮</button>',
  buttonGroup: '<input v-bind="configProps"/>'
}

const usageCode = ref(`<template>
  ${usageCodeMap[configList.value[0].value].trim()}
</template>`)

function onPanelChange (value)  {
  usageCode.value = `<template>
  ${usageCodeMap[value].trim()}
</template>`
}
</script>

```

props.ts文件内容请参考`_usage/props.ts`。