在线文档教程

按钮 | Button

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幽灵按钮Booleanfalse
disabled禁用状态Booleanfalse
type按钮显示样式Stringdefault, primary, dangerdefault
size尺寸Stringsmall, normal, largenormal
icon图标Stringmore, back

Slot

name描述
-显示的文本内容
icon自定义显示的图标