FS-UI v0.1.33

Button 按钮

使用指南

import { Button } from 'fs-ui'

export default {
  components: {
    fsButton: Button
  }
}
1
2
3
4
5
6
7

代码演示

  • 尺寸大小
<fs-button>按钮</fs-button><br>
<fs-button size="large">页面主按钮</fs-button><br>
1
2
  • 朴素按钮
<fs-button type="plain" size="large">页面主按钮</fs-button>
1
  • 次要按钮
<fs-button type="secondary" size="large">页面次要按钮</fs-button>
1
  • 禁用
<fs-button :disabled="true" size="large">页面主按钮</fs-button>
<fs-button :disabled="true" type="plain" size="large">页面主按钮</fs-button>
<fs-button :disabled="true" type="secondary" size="large">页面次要按钮</fs-button>
1
2
3
  • 加载中
<fs-button :loading="true" size="large">页面主按钮</fs-button>
  <fs-button :loading="true" type="plain" size="large">页面主按钮</fs-button>
  <fs-button>
<fs-button :loading="true" type="secondary" size="large">页面主按钮</fs-button>
1
2
3
4
  • 按钮做请求时，封装防止重复点击
<fs-button size="large" :fetch="fetchData">页面主按钮</fs-button>
1
fetchData () {
  return axios.get('/api/path').then(res => {
    console.log(res)
  }).catch(err => {
    console.log(err)
  })
}
1
2
3
4
5
6
7

属性

参数 说明 类型 默认值
disabled 是否disable Boolen -
loading 是否显示loading图标 Boolen -
size 按钮大小，可选值为 normal large String normal
type 按钮类型，可选值为 primary plain secondary String primary
to 内部跳转地址 String -
url 外部跳转地址 String -
fetch 绑定到按钮的请求函数，需要返回 Promise, 当设置了fetch后，click事件会无效 Function -

插槽

插槽名 说明
- 默认内容

事件

event 说明 返回值
click 点击 event

← Group 分组 →