frontend / zui

Download as
Browse Code »

Commit 67d3b6d34452501040f5edc533ac323da9342692

Authored by 刘汉宸
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
  Diff comments   View file @67d3b6d
... ... @@ -126,6 +126,13 @@
126 126 <zui-button type="ghost" color="#000">Ghost</zui-button>
127 127 <zui-button type="link" color="#000">Link</zui-button>
128 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 136 </div>
130 137 </template>
131 138 ```
... ... @@ -220,10 +227,14 @@ export default {
220 227 参数|说明|类型|可选值|默认值
221 228 -|-|-|-|-
222 229 type | 按钮类型 | String | default,primary,secondary | default
  230 +size | 按钮大小 | String | ms,md,lg | md
223 231 block | 块状按钮 | Boolean | true,false | false
224 232 round | 圆角按钮 | Boolean | true,false | false
225 233 square | 矩形按钮 | Boolean | true,false | false
226 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 239 ## Events 事件
229 240  
... ...
packages/button/index.vue
  Diff comments   View file @67d3b6d
... ... @@ -29,6 +29,10 @@ export default {
29 29 disabled: Boolean,
30 30 theme: String,
31 31 color: String,
  32 + fontColor: {
  33 + type: String,
  34 + default: '#FFF',
  35 + },
32 36 },
33 37 computed: {
34 38 classRender() {
... ... @@ -46,6 +50,14 @@ export default {
46 50 },
47 51 styleRender() {
48 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 61 if (this.type === 'primary') {
50 62 return {
51 63 backgroundColor: this.hover ? color(this.color).lighten(0.2) : this.color,
... ...