mirror of
https://github.com/WeBankFinTech/fes.js.git
synced 2025-04-06 03:59:53 +08:00
88 lines
4.3 KiB
Markdown
88 lines
4.3 KiB
Markdown
---
|
||
pageClass: comp-page-class
|
||
---
|
||
# Button 按钮
|
||
|
||
## 概述
|
||
基础组件，触发业务逻辑时使用。
|
||
|
||
## 代码示例
|
||
|
||
<ClientOnly>
|
||
<row>
|
||
<cell span="12" class="pr-20">
|
||
<componetTemplate title="按钮类型" template="ui/templates/button/1.html">
|
||
<template v-slot:demo>
|
||
<Wb-button>Default</Wb-button>
|
||
<Wb-button type="ghost">Ghost</Wb-button>
|
||
<Wb-button type="text">Text</Wb-button>
|
||
<Wb-button type="primary">Primary</Wb-button>
|
||
<Wb-button type="info">Info</Wb-button>
|
||
<Wb-button type="success">Success</Wb-button>
|
||
<Wb-button type="warn">Warn</Wb-button>
|
||
<Wb-button type="error">Error</Wb-button>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>按钮类型有：默认按钮、主按钮、幽灵按钮、文字按钮以及四种颜色按钮。</p>
|
||
<p>通过设置type为primary、ghost、text、info、success、warn、error创建不同样式的按钮，不设置为默认样式。</p>
|
||
</template>
|
||
</componetTemplate>
|
||
<componetTemplate title="图标按钮及按钮形状" template="ui/templates/button/3.html">
|
||
<template v-slot:demo>
|
||
<Wb-button icon="md-search" circle></Wb-button>
|
||
<Wb-button icon="md-search" circle>查询</Wb-button>
|
||
<Wb-button icon="md-search">查询</Wb-button>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>通过设置icon属性在Button内部嵌入一个Icon, 显示在Button内部的左边</p>
|
||
<p>通过设置circle属性，可以将Button显示为圆角</p>
|
||
</template>
|
||
</componetTemplate>
|
||
</cell>
|
||
<cell span="12" class="pl-20">
|
||
<componetTemplate title="禁用" template="ui/templates/button/2.html">
|
||
<template v-slot:demo>
|
||
<Wb-button disabled>Default</Wb-button>
|
||
<Wb-button type="ghost" disabled>Ghost</Wb-button>
|
||
<Wb-button type="text" disabled>Text</Wb-button>
|
||
<Wb-button type="primary" disabled>Primary</Wb-button>
|
||
<Wb-button type="info" disabled>Info</Wb-button>
|
||
<Wb-button type="success" disabled>Success</Wb-button>
|
||
<Wb-button type="warn" disabled>Warn</Wb-button>
|
||
<Wb-button type="error" disabled>Error</Wb-button>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>当设置disabled属性为true时，按钮不可点击</p>
|
||
</template>
|
||
</componetTemplate>
|
||
<componetTemplate title="长按钮" template="ui/templates/button/4.html">
|
||
<template v-slot:demo>
|
||
<Wb-button type="success" long>确认提交</Wb-button>
|
||
<Wb-button type="error" long>确认删除</Wb-button>
|
||
</template>
|
||
<template v-slot:description>
|
||
<p>Button组件的宽度默认是通过内容撑开，但是当设置long属性后按钮为100%宽度</p>
|
||
</template>
|
||
</componetTemplate>
|
||
</cell>
|
||
</Row>
|
||
</ClientOnly>
|
||
|
||
## API
|
||
|
||
### Props
|
||
|
||
| 属性 | 说明 | 类型 | 默认值 |
|
||
|:--------------|:--------------------------|:--------|:-----------------------------------------------------|
|
||
| type | 按钮的类型，可选值是primary、ghost、text、info、success、warn、error或者无 | String | null |
|
||
| long | 控制按钮是否显示为100%宽度 | Boolean | false |
|
||
| circle | 控制按钮显示为圆的 | Boolean | false |
|
||
| disabled | 控制按钮是否可以点击 | Boolean | false |
|
||
| icon | 控制按钮内部左侧显示的小图标 | String | null |
|
||
| control | 防止多次点击，在设置的时间内，只有一次点击有效 | Number | 300 |
|
||
|
||
### Events
|
||
|
||
| 事件名 | 说明 | 返回值 |
|
||
|:--------------|:--------------------------|:--------|
|
||
| click | 单击按钮触发 | (event) => void | |