Commit 67d3b6d34452501040f5edc533ac323da9342692
1 parent
9c7dccfd
Exists in
master
feat: 优化Button支持渐变颜色
Showing
2 changed files
with
23 additions
and
0 deletions
Show diff stats
examples/views/docs/component/button.md
| @@ -126,6 +126,13 @@ | @@ -126,6 +126,13 @@ | ||
| 126 | <zui-button type="ghost" color="#000">Ghost</zui-button> | 126 | <zui-button type="ghost" color="#000">Ghost</zui-button> |
| 127 | <zui-button type="link" color="#000">Link</zui-button> | 127 | <zui-button type="link" color="#000">Link</zui-button> |
| 128 | </div> | 128 | </div> |
| 129 | + <div style="padding-top: 10px;"> | ||
| 130 | + <zui-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变</zui-button> | ||
| 131 | + <zui-button color="linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%)" round>渐变</zui-button> | ||
| 132 | + <zui-button color="linear-gradient(to bottom right, #FDD108, #FFA000)" font-color="#333">渐变</zui-button> | ||
| 133 | + <zui-button color="linear-gradient(to bottom right, #F39800, #FF6400)">渐变</zui-button> | ||
| 134 | + <zui-button color="linear-gradient(to bottom right, #14C3A5, #117361)">渐变</zui-button> | ||
| 135 | + </div> | ||
| 129 | </div> | 136 | </div> |
| 130 | </template> | 137 | </template> |
| 131 | ``` | 138 | ``` |
| @@ -220,10 +227,14 @@ export default { | @@ -220,10 +227,14 @@ export default { | ||
| 220 | 参数|说明|类型|可选值|默认值 | 227 | 参数|说明|类型|可选值|默认值 |
| 221 | -|-|-|-|- | 228 | -|-|-|-|- |
| 222 | type | 按钮类型 | String | default,primary,secondary | default | 229 | type | 按钮类型 | String | default,primary,secondary | default |
| 230 | +size | 按钮大小 | String | ms,md,lg | md | ||
| 223 | block | 块状按钮 | Boolean | true,false | false | 231 | block | 块状按钮 | Boolean | true,false | false |
| 224 | round | 圆角按钮 | Boolean | true,false | false | 232 | round | 圆角按钮 | Boolean | true,false | false |
| 225 | square | 矩形按钮 | Boolean | true,false | false | 233 | square | 矩形按钮 | Boolean | true,false | false |
| 226 | disabled | 按钮禁用 | Boolean | true,false | false | 234 | disabled | 按钮禁用 | Boolean | true,false | false |
| 235 | +theme | 按钮主题 | String | red,green,blue | - | ||
| 236 | +color | 按钮颜色 | String | - | - | ||
| 237 | +fontColor | 按钮文本颜色，只在color为linear-gradient模式下生效 | String | - | #FFF | ||
| 227 | 238 | ||
| 228 | ## Events 事件 | 239 | ## Events 事件 |
| 229 | 240 |
packages/button/index.vue
| @@ -29,6 +29,10 @@ export default { | @@ -29,6 +29,10 @@ export default { | ||
| 29 | disabled: Boolean, | 29 | disabled: Boolean, |
| 30 | theme: String, | 30 | theme: String, |
| 31 | color: String, | 31 | color: String, |
| 32 | + fontColor: { | ||
| 33 | + type: String, | ||
| 34 | + default: '#FFF', | ||
| 35 | + }, | ||
| 32 | }, | 36 | }, |
| 33 | computed: { | 37 | computed: { |
| 34 | classRender() { | 38 | classRender() { |
| @@ -46,6 +50,14 @@ export default { | @@ -46,6 +50,14 @@ export default { | ||
| 46 | }, | 50 | }, |
| 47 | styleRender() { | 51 | styleRender() { |
| 48 | if (this.color) { | 52 | if (this.color) { |
| 53 | + if (this.color.includes('linear-gradient')) { | ||
| 54 | + return { | ||
| 55 | + color: this.fontColor, | ||
| 56 | + background: this.color, | ||
| 57 | + border: 'none', | ||
| 58 | + opacity: this.hover ? 0.9 : 1, | ||
| 59 | + }; | ||
| 60 | + } | ||
| 49 | if (this.type === 'primary') { | 61 | if (this.type === 'primary') { |
| 50 | return { | 62 | return { |
| 51 | backgroundColor: this.hover ? color(this.color).lighten(0.2) : this.color, | 63 | backgroundColor: this.hover ? color(this.color).lighten(0.2) : this.color, |