Button 按钮

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

Slots