当前位置: 首页 > 文档资料 > Mint UI 中文文档 >

button

优质
小牛编辑
125浏览
2023-12-01

按钮,提供几种基础样式和尺寸,可自定义图标。


引入

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自定义显示的图标