Button 按钮

使用指南

引入方式

import { button } from 'feart';

components: {
  'fe-button': Button,
},

代码演示

按钮类型

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

<fe-button>默认按钮</fe-button>
<fe-button type="primary">主要按钮</fe-button>
<fe-button type="warn">警告按钮</fe-button>
<fe-button type="danger">危险按钮</fe-button>

朴素按钮

通过 plain 属性将按钮设置为朴素按钮，朴素按钮的文字为按钮颜色，背景为透明。

<fe-button plain>朴素按钮</fe-button>
<fe-button plain type="primary">朴素按钮</fe-button>

禁用状态

通过 disabled 属性来禁用按钮，禁用状态下按钮不可点击

<fe-button disabled>默认按钮</fe-button>
<fe-button plain disabled>朴素按钮</fe-button>
<fe-button type="primary" disabled>主要按钮</fe-button>

加载状态

通过 loading 属性设置按钮为加载状态

<fe-button loading></fe-button>
<fe-button plain loading></fe-button>
<fe-button type="primary" loading>加载中</fe-button>
<fe-button plain type="primary" loading>加载中</fe-button>

按钮形状

通过 square 设置方形按钮，通过 round 设置圆形按钮

<fe-button plain type="primary" square>方角 plain</fe-button>
<fe-button type="primary" round>圆角 plain</fe-button>

图标按钮

通过 icon 属性设置按钮图标，支持 Icon 组件里的所有图标，也可以传入图标 URL

<fe-button icon="star">按钮</fe-button>
<fe-button icon="https://nuofe.nntest.cn/feart/images/demoimgs/nuoyan-logo.jpg">
  按钮
</fe-button>

按钮尺寸

支持 large、normal、small、mini 4 种尺寸，默认为 normal

<fe-button size="large" type="primary">按钮</fe-button>
<fe-button size="normal" type="primary">按钮</fe-button>
<fe-button size="small" type="primary">按钮</fe-button>
<fe-button size="mini" type="primary">按钮</fe-button>

自定义颜色

<fe-button color="red">单色按钮</fe-button>
<fe-button color="red" plain>单色按钮</fe-button>
<fe-button color="linear-gradient(90deg, #1D62F0, #19D5FD)">多彩渐变</fe-button>

跳转链接

<fe-button link="/">去主页</fe-button>
<fe-button link="https://www.jss.com.cn/">去主页</fe-button>

块级按钮

<fe-button type="primary" block>块级按钮</fe-button>

和 flexbox 同用

<fe-flexbox :gutter="0">
  <fe-flexbox-item :span="2" style="text-align: center;">
    <img src="https://m.axnsc.com/Contents/images/Shopping-2.png" alt="" style="width:20px" />
    <p style="font-size: 10px;margin-top: -5px;color: #808185;">购物车</p>
  </fe-flexbox-item>
  <fe-flexbox-item>
    <fe-button type="primary" color="#FE8604" block square>加入购物车</fe-button>
  </fe-flexbox-item>
  <fe-flexbox-item>
    <fe-button type="primary" color="#FF3C25" square block>立即购买</fe-button>
  </fe-flexbox-item>
</fe-flexbox>

API

Events

绑定点击事件请使用@click.native