API
Variables
重要提示及已知问题
属性
| 名字 | 类型 | 默认值 | 说明 | 版本要求 |
| type | string | default | 按钮类型，可选值为 default,primary,warn | -- |
| disabled | boolean | false | 是否不可点击 | -- |
| text | string | 按钮文字，同默认slot | -- | |
| mini | boolean | false | 是否为mini类型，即小尺寸的按钮 | -- |
| plain | boolean | false | 是否是plain样式，没有背景色 | -- |
| action-type | string | button的type属性，默认为浏览器默认(submit)，可选为 submit button reset | -- | |
| link | string | vue-router 路由, 值为 BACK 等同于 go(-1) | v2.3.5 | |
| show-loading | boolean | false | 显示加载图标 | -- |
| gradients | array | 按钮背景渐变，长度必须为2 | v2.7.4 |
插槽
| 名字 | 说明 | 版本要求 |
| 默认插槽 | 按钮文字 | -- |
样式变量
| 名字 | 默认值 | 说明 | 继承自变量 |
| @button-global-border-radius | 5px | 圆角边框 | |
| @button-global-font-color | #FFFFFF | 字体颜色 | |
| @button-global-margin-top | 15px | 与相邻按钮的 margin-top 间隙，只有一个按钮时不生效 | |
| @button-global-height | 42px | 按钮高度 | |
| @button-global-disabled-font-color | rgba(255,255,255,.6) | disabled状态下的字体颜色 | |
| @button-global-active-font-color | rgba(255,255,255,.6) | disabled状态下的字体颜色 | |
| @button-global-font-size | 18px | 字体大小 | |
| @button-mini-font-size | 13px | mini类型的字体大小 | |
| @button-mini-line-height | 2.3 | mini类型的行高 | |
| @button-warn-bg-color | #E64340 | warn类型的背景颜色 | |
| @button-warn-active-color | #CE3C39 | active状态下，warn类型的背景颜色 | |
| @button-warn-disabled-bg-color | #EC8B89 | disabled状态下，warn类型的背景颜色 | |
| @button-default-bg-color | #F8F8F8 | default类型的背景颜色 | |
| @button-default-font-color | #000000 | default类型的字体颜色 | |
| @button-default-active-bg-color | #DEDEDE | active状态下，default类型的背景颜色 | |
| @button-default-disabled-font-color | rgba(0,0,0,.3) | disabled状态下，default类型的字体颜色 | |
| @button-default-disabled-bg-color | #F7F7F7 | disabled状态下，default类型的背景颜色 | |
| @button-default-active-font-color | rgba(0,0,0,.6) | active状态下，default类型的字体颜色 | |
| @button-primary-bg-color | #1AAD19 | primary类型的背景颜色 | |
| @button-primary-active-bg-color | #179B16 | active状态下，primary类型的背景颜色 | |
| @button-primary-disabled-bg-color | #9ED99D | disabled状态下，primary类型的背景颜色 | |
| @button-plain-primary-color | rgba(26,173,25,1) | plain的primary类型的字体颜色 | |
| @button-plain-primary-border-color | rgba(26,173,25,1) | plain的primary类型的边框颜色 | |
| @button-plain-primary-active-color | rgba(26,173,25,.6) | active状态下，plain的primary类型的字体颜色 | |
| @button-plain-primary-active-border-color | rgba(26,173,25,.6) | active状态下，plain的primary类型的边框颜色 | |
| @button-plain-default-color | rgba(53,53,53,1) | plain的default类型的字体颜色 | |
| @button-plain-default-border-color | rgba(53,53,53,1) | plain的default类型的边框颜色 | |
| @button-plain-default-active-color | rgba(53,53,53,.6) | active状态下，plain的default类型的字体颜色 | |
| @button-plain-default-active-border-color | rgba(53,53,53,.6) | active状态下，plain的default类型的边框颜色 | |
| @button-plain-warn-color | rgba(206,60,57,1) | plain的warn类型的字体颜色 | |
| @button-plain-warn-border-color | rgba(206,60,57,1) | plain的warn类型的边框颜色 | |
| @button-plain-warn-active-color | rgba(206,60,57,.6) | active状态下，plain的warn类型的字体颜色 | |
| @button-plain-warn-active-border-color | rgba(206,60,57,.6) | active状态下，plain的warn类型的边框颜色 |
重要提示及已知问题
- Q@click 绑定事件不生效
按照
Vue文档，在组件上绑定原生点击事件请使用@click.native。
Changelog
发布日志
- v2.9.2 [feature] button支持样式变量 #2748
- v2.9.0 [feature] warn 类型支持 plain 样式 #2478
- v2.7.5 [fix] 修复plain样式并禁用时class不对的问题
- v2.7.4 [feature] 顺应 iOS 设计，支持直接定义背景渐变 prop:gradients
- v2.7.1 [enhance] 链接支持对象类型 #2068
- v2.5.0 [feature] 添加禁用背景颜色. #1630
- v2.1.1-rc.10 [feature] 添加禁用背景颜色. #896
- v2.1.1-rc.3 [fix] 修复单独引入没有引入Loading组件时，样式缺失 #986 @malaimoo
- v2.1.0 [feature] 更新到 `WeUI` 最新版本
- v2.1.0 [feature] 支持 `prop:isLoading`
- v2.1.0-rc.46 [feature] 添加`less`变量 #896 @erguotou520
- v2.1.1-rc.12 [fix] 修复primary类型按钮active时的background-color