Button 按钮 #
组件预览 #
实时渲染
下面的按钮是由 Vue 组件直接在文档中渲染生成的，你可以直接交互。
不同尺寸 #
代码演练 #
基础用法 #
vue
<template>
<DemoButton type="primary">点击我</DemoButton>
</template>
1
2
3
2
3
API 文档 #
Props #
| 属性 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| type | 'primary' | 'success' | 'danger' | 'primary' | 按钮类型 |
| size | 'small' | 'medium' | 'large' | 'medium' | 按钮尺寸 |
完整代码 #
查看 DemoButton.vue 源码
vue
<template>
<button :class="['demo-button', type, size]">
<slot></slot>
</button>
</template>
<style scoped>
/* 见上文样式定义 */
</style>
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9