API
Variables
Tips
Props
| name | type | default | description | required version |
| type | string | default | button style type, one of default, primary, warn | -- |
| disabled | boolean | false | if disable the button | -- |
| text | string | button text, has the same function as default slot | -- | |
| mini | boolean | false | if use smaller style | -- |
| plain | boolean | false | if use plain styles which has no backgroundColor | -- |
| action-type | string | button's type value, one of submit, button, reset | -- | |
| link | string | vue-router path, BACK is alias to go(-1) | v2.3.5 | |
| show-loading | boolean | false | show loading icon | -- |
| gradients | array | iOS design gradients, Array length should be 2 | v2.7.4 |
Slots
| name | description | required version |
| default | button text | -- |
Variables
| name | default | description | inherited name |
| @button-global-border-radius | 5px | border radius | |
| @button-global-font-color | #FFFFFF | font color | |
| @button-global-margin-top | 15px | margin-top value between previous button, not works when there is only one button | |
| @button-global-height | 42px | button height | |
| @button-global-disabled-font-color | rgba(255,255,255,.6) | the font color in disabled | |
| @button-global-active-font-color | rgba(255,255,255,.6) | the font color in disabled | |
| @button-global-font-size | 18px | font size | |
| @button-mini-font-size | 13px | the font size of the mini type | |
| @button-mini-line-height | 2.3 | the line height of the mini type | |
| @button-warn-bg-color | #E64340 | the background color of the warn type | |
| @button-warn-active-color | #CE3C39 | the background color of the warn type in active | |
| @button-warn-disabled-bg-color | #EC8B89 | the background color of the warn type in disabled | |
| @button-default-bg-color | #F8F8F8 | the background color of the default type | |
| @button-default-font-color | #000000 | the font color of the default type | |
| @button-default-active-bg-color | #DEDEDE | the background color of the default type in active | |
| @button-default-disabled-font-color | rgba(0,0,0,.3) | the font color of the default type in disabled | |
| @button-default-disabled-bg-color | #F7F7F7 | the background color of the default type in disabled | |
| @button-default-active-font-color | rgba(0,0,0,.6) | the font color of the default type in active | |
| @button-primary-bg-color | #1AAD19 | the background color of the primary type | |
| @button-primary-active-bg-color | #179B16 | the background color of the primary type in active | |
| @button-primary-disabled-bg-color | #9ED99D | the background color of the primary type in disabled | |
| @button-plain-primary-color | rgba(26,173,25,1) | the font color of the plain primary type | |
| @button-plain-primary-border-color | rgba(26,173,25,1) | the border color of the plain primary type | |
| @button-plain-primary-active-color | rgba(26,173,25,.6) | the font color of the plain primary type in active | |
| @button-plain-primary-active-border-color | rgba(26,173,25,.6) | the border color of the plain primary type in active | |
| @button-plain-default-color | rgba(53,53,53,1) | the font color of the plain default type | |
| @button-plain-default-border-color | rgba(53,53,53,1) | the border color of the plain default type | |
| @button-plain-default-active-color | rgba(53,53,53,.6) | the font color of the plain default type in active | |
| @button-plain-default-active-border-color | rgba(53,53,53,.6) | the border color of the plain default type in active | |
| @button-plain-warn-color | rgba(206,60,57,1) | the font color of the plain warn type | |
| @button-plain-warn-border-color | rgba(206,60,57,1) | the border color of the plain warn type | |
| @button-plain-warn-active-color | rgba(206,60,57,.6) | the font color of the plain warn type in active | |
| @button-plain-warn-active-border-color | rgba(206,60,57,.6) | the border color of the plain warn type in active |
Tips
- Q@click event binding not working
As
Vuedocument says，use.nativemodifier forv-on, so you should use@click.native。
Contributors
Contributors
Total commits quantity: 34，Total contributors quantity: 7
airylandClayLinHaobinwuzhiqun95lichunqiangjackiewgChangelog
Releases
- v2.9.2 [feature] support styles variable for button #2748
- v2.9.0 [feature] support plain for warn-button #2478
- v2.7.5 [fix] fix plain and disabled class error
- v2.7.4 [feature] add prop:gradients for iOS design gradients
- v2.7.1 [enhance] support object-link #2068
- v2.5.0 [feature] Add primary、warn disabled bg color. #1630
- v2.1.1-rc.10 [feature] Add default disabled bg color. #896
- v2.1.1-rc.3 [fix] Fix no loading style if not using Loading component #986 @malaimoo
- v2.1.1-rc.12 [fix] Fix primary button active background-color