codecamp

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


Mint UI 顶部选项卡-Navbar
Mint UI 单元格-Cell
温馨提示
下载编程狮App,免费阅读超1000+编程语言教程
取消
确定
目录

关闭

MIP.setData({ 'pageTheme' : getCookie('pageTheme') || {'day':true, 'night':false}, 'pageFontSize' : getCookie('pageFontSize') || 20 }); MIP.watch('pageTheme', function(newValue){ setCookie('pageTheme', JSON.stringify(newValue)) }); MIP.watch('pageFontSize', function(newValue){ setCookie('pageFontSize', newValue) }); function setCookie(name, value){ var days = 1; var exp = new Date(); exp.setTime(exp.getTime() + days*24*60*60*1000); document.cookie = name + '=' + value + ';expires=' + exp.toUTCString(); } function getCookie(name){ var reg = new RegExp('(^| )' + name + '=([^;]*)(;|$)'); return document.cookie.match(reg) ? JSON.parse(document.cookie.match(reg)[2]) : null; }