Mint UI 按钮-Button
2021-09-06 15:18 更新
按钮,提供几种基础样式和尺寸,可自定义图标。
引入
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 | 自定义显示的图标 |
实例演示
以上内容是否对您有帮助:
更多建议: