基于 vuepress-plugin-demoblock-plus 插件来实现vue组件的支持。
- vue组件
<demo-block>
<xl-button>默认按钮</xl-button>
<xl-button type="primary">主要按钮</xl-button>
<xl-button type="success">成功按钮</xl-button>
<xl-button type="info">信息按钮</xl-button>
<xl-button type="warning">警告按钮</xl-button>
<xl-button type="danger">危险按钮</xl-button>
</demo-block>
- vue代码自动渲染并且显示对应code（支持script和style）
:::demo 使用type、plain、round和circle属性来定义 Button 的样式。
<template>
<xl-button>默认按钮</xl-button>
<xl-button type="primary">主要按钮</xl-button>
<xl-button type="success">成功按钮</xl-button>
<xl-button type="info">信息按钮</xl-button>
<xl-button type="warning">警告按钮</xl-button>
<xl-button type="danger">危险按钮</xl-button>
</template>:::
- 支持script和style
:::demo 使用type、plain、round和circle属性来定义 Button 的样式。
<template>
<input class="input" type="text" v-model="input"/>
<xl-button type="primary" @click="onSubmit">提交</xl-button>
<div style="margin-top: 16px">输出内容：{{ content }}</div>
</template>
<script>
import { ref, defineComponent } from 'vue'
export default defineComponent({
name: 'InputDemo',
setup() {
const input = ref()
const content = ref()
function onSubmit() {
content.value = input.value
}
return { input, content, onSubmit }
}
})
</script>
<style>
.input {
border: 1px solid #ebebeb;
border-radius: 4px;
padding: 14px;
width: 300px;
font-size: 16px;
margin-right: 16px;
}
</style>:::
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent