Mint UI参考手册
CSS 组件 | CSS components
按钮 | Button
按钮,提供几种基础样式和尺寸,可自定义图标。
引入
import { Button } from 'mint-ui';
Vue.component(Button.name, Button);
例子
改变颜色
<mt-button type="default">default</mt-button>
<mt-button type="primary">primary</mt-button>
<mt-button type="danger">danger</mt-button>
改变大小
<mt-button size="small">small</mt-button>
<mt-button size="large">large</mt-button>
<mt-button size="normal">normal</mt-button>
禁用按钮
<mt-button disabled>disabled</mt-button>
幽灵按钮
<mt-button plain>plain</mt-button>
带图标
<mt-button icon="back">back</mt-button>
<mt-button icon="more">更多</mt-button>
自定义图标
<mt-button>
<img src="../assets/100x100.png" height="20" width="20" slot="icon">
带自定义图标
</mt-button>
绑定 click 事件
<mt-button @click.native="handleClick">点击触发 handleClick</mt-button>
API
参数 |
说明 |
类型 |
可选值 |
默认值 |
---|---|---|---|---|
plain |
幽灵按钮 |
Boolean |
false |
|
disabled |
禁用状态 |
Boolean |
false |
|
type |
按钮显示样式 |
String |
default, primary, danger |
default |
size |
尺寸 |
String |
small, normal, large |
normal |
icon |
图标 |
String |
more, back |
Slot
name |
描述 |
---|---|
- |
显示的文本内容 |
icon |
自定义显示的图标 |