Question

import { Button } from 'feui';
components: {
  [Button.name]: Button
}

代码演示

按钮类型

支持default、primary、warn三种类型，默认为default

<fe-button type="default">页面次要操作</fe-button>
<fe-button type="primary">页面主要操作</fe-button>
<fe-button type="warn">页面警告操作</van-button>

小按钮

将mini属性设置为true 可实现小按钮

<fe-button type="primary" mini>按钮</fe-button>
<fe-button type="default" mini>按钮</fe-button>
<fe-button type="warn" mini>按钮</fe-button>

禁用状态

通过disabled属性来禁用按钮，此时按钮不可点击

<fe-button type="primary" disabled>页面主要操作 Disabled</fe-button>
<fe-button type="default" disabled>页面次要操作 Disabled</fe-button>
<fe-button type="warn" disabled>警告类操作 Disabled</fe-button>

加载状态

按钮出现loading小菊花

<fe-button type="primary" show-loading>页面主要操作 Loading</fe-button>
<fe-button type="default" show-loading>页面次要操作 Loading</fe-button>
<fe-button type="warn" show-loading>警告类操作 Loading</fe-button>

按钮无背景

设置plain为true

<fe-button type="primary" plain>页面主要操作 Loading</fe-button>
<fe-button type="default" plain>页面次要操作 Loading</fe-button>
<fe-button type="warn" plain>警告类操作 Loading</fe-button>

link

当成跳转链接使用

<fe-button type="primary" link="/demo">去demo页面</fe-button>
<fe-button type="default" link="BACK">Back</fe-button>

背景渐变

接受一个数组 显示不同渐变色彩

<fe-button :gradients="['#1D62F0', '#19D5FD']">多彩背景</fe-button>

API

参数	说明	类型	默认值	可选值
type	按钮类型	String	default	default,primary,warn
disabled	按钮是否可用	Boolean	false	true,false
text	按钮文字，同默认slot	String	-	-
mini	是否为小按钮	Boolean	false	true,false
plain	按钮是否有背景	Boolean	false	true,false
show-loading	是否有loading	Boolean	false	true,false
link	vue-router路由	String	-	-
gradients	背景渐变，数组最小要传两个值	Array	-	-
action-type	button的type属性，默认为浏览器默认(submit)	String	submit	submit,button,reset
-	-	-	-	-

Slots

Slot名	说明	备注
default	按钮文字	-
-	-	-