frontend / zui

Download as
Browse Code »

Commit 4737d3cd739f04ffd31f0e4f4b8fbce1f56eaf14

Authored by 刘汉宸
1 parent 39ace875
Exists in master

perf: 优化按钮禁用逻辑

Showing 4 changed files with 89 additions and 97 deletions   Show diff stats
examples/views/docs/component/button.md
  Diff comments   View file @4737d3c
... ... @@ -32,6 +32,14 @@
32 32 <template>
33 33 <div>
34 34 <div style="padding-top: 10px;">
  35 + <zui-button>Default</zui-button>
  36 + <zui-button type="primary">Primary</zui-button>
  37 + <zui-button type="secondary">Secondary</zui-button>
  38 + <zui-button type="plain">Plain</zui-button>
  39 + <zui-button type="ghost">Ghost</zui-button>
  40 + <zui-button type="link">Link</zui-button>
  41 + </div>
  42 + <div style="padding-top: 10px;">
35 43 <zui-button theme="red">Default</zui-button>
36 44 <zui-button type="primary" theme="red">Primary</zui-button>
37 45 <zui-button type="secondary" theme="red">Secondary</zui-button>
... ... @@ -221,14 +229,22 @@
221 229 ```html
222 230 <template>
223 231 <div>
224   - <zui-button type="primary" @click="handleClick">普通按钮</zui-button>
225   - <zui-button disabled @click="handleClick">禁用按钮</zui-button>
  232 + <zui-button @click="toggleDisabled">切换禁用状态</zui-button>
  233 + <zui-button :disabled="disabled" type="primary" @click="handleClick">按钮</zui-button>
226 234 </div>
227 235 </template>
228 236  
229 237 <script>
230 238 export default {
  239 + data() {
  240 + return {
  241 + disabled: true
  242 + }
  243 + },
231 244 methods: {
  245 + toggleDisabled() {
  246 + this.disabled = !this.disabled;
  247 + },
232 248 handleClick() {
233 249 console.log('click');
234 250 }
... ...
packages/button/index.scss
  Diff comments   View file @4737d3c
... ... @@ -4,7 +4,6 @@
4 4 padding: $h-gap-md $v-gap-md;
5 5 font-size: $font-md;
6 6 font-weight: normal;
7   - font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
8 7 cursor: pointer;
9 8 transition: all 70ms ease;
10 9 border-radius: 0.35rem;
... ... @@ -54,142 +53,112 @@
54 53 &.button-hover {
55 54 background-color: $bg-active;
56 55 }
57   - @mixin fill-mixin($color) {
  56 + // primary
  57 + @mixin primary-mixin($bgColor) {
  58 + background-color: $bgColor;
  59 + color: #fff;
58 60 &.button-hover {
59   - background-color: $color;
  61 + background-color: lighten($bgColor, 10%);
60 62 }
61 63 }
62 64 &.primary {
63   - background-color: $color-primary;
64   - color: #FFF;
65   - @include fill-mixin(lighten($color-primary, 10%));
  65 + @include primary-mixin($color-primary);
66 66 &.red {
67   - background-color: $color-red;
68   - @include fill-mixin(lighten($color-red, 10%));
  67 + @include primary-mixin($color-red);
69 68 }
70 69 &.green {
71   - background-color: $color-green;
72   - @include fill-mixin(lighten($color-green, 10%));
  70 + @include primary-mixin($color-green);
73 71 }
74 72 &.blue {
75   - background-color: $color-blue;
76   - @include fill-mixin(lighten($color-blue, 10%));
  73 + @include primary-mixin($color-blue);
  74 + }
  75 + }
  76 + // secondary
  77 + @mixin secondary-mixin($color) {
  78 + color: $color;
  79 + background-color: hsl(hue($color), saturation($color), 95%);
  80 + &.button-hover {
  81 + background-color: hsl(hue($color), saturation($color), 90%);
77 82 }
78 83 }
79 84 &.secondary {
80   - color: $color-primary;
81   - background-color: hsl(hue($color-primary), saturation($color-primary), 95%);
82   - @include fill-mixin(hsl(hue($color-primary), saturation($color-primary), 90%));
  85 + @include secondary-mixin($color-primary);
83 86 &.red {
84   - color: $color-red;
85   - background-color: hsl(hue($color-red), saturation($color-red), 95%);
86   - @include fill-mixin(hsl(hue($color-red), saturation($color-red), 90%));
  87 + @include secondary-mixin($color-red);
87 88 }
88 89 &.green {
89   - color: $color-green;
90   - background-color: hsl(hue($color-green), saturation($color-green), 95%);
91   - @include fill-mixin(hsl(hue($color-green), saturation($color-green), 90%));
  90 + @include secondary-mixin($color-green);
92 91 }
93 92 &.blue {
94   - color: $color-blue;
95   - background-color: hsl(hue($color-blue), saturation($color-blue), 95%);
96   - @include fill-mixin(hsl(hue($color-blue), saturation($color-blue), 90%));
  93 + @include secondary-mixin($color-blue);
97 94 }
98 95 }
99   - &.plain {
100   - color: $color-primary;
101   - background-color: hsl(hue($color-primary), saturation($color-primary), 95%);
102   - border-color: $color-primary;
  96 + // plain
  97 + @mixin plain-mixin($color) {
  98 + color: $color;
  99 + background-color: hsl(hue($color), saturation($color), 95%);
  100 + border-color: $color;
103 101 &:not(.custom).button-hover {
104   - background-color: hsl(hue($color-primary), saturation($color-primary), 95%);
  102 + background-color: hsl(hue($color), saturation($color), 90%);
105 103 }
  104 + }
  105 + &.plain {
  106 + @include plain-mixin($color-primary);
106 107 &.red {
107   - color: $color-red;
108   - border-color: $color-red;
109   - background-color: hsl(hue($color-red), saturation($color-red), 95%);
110   - &:not(.custom).button-hover {
111   - background-color: hsl(hue($color-red), saturation($color-red), 90%);
112   - }
  108 + @include plain-mixin($color-red);
113 109 }
114 110 &.green {
115   - color: $color-green;
116   - border-color: $color-green;
117   - background-color: hsl(hue($color-green), saturation($color-green), 95%);
118   - &:not(.custom).button-hover {
119   - background-color: hsl(hue($color-green), saturation($color-green), 90%);
120   - }
  111 + @include plain-mixin($color-green);
121 112 }
122 113 &.blue {
123   - color: $color-blue;
124   - border-color: $color-blue;
125   - background-color: hsl(hue($color-blue), saturation($color-blue), 95%);
126   - &:not(.custom).button-hover {
127   - background-color: hsl(hue($color-blue), saturation($color-blue), 90%);
128   - }
  114 + @include plain-mixin($color-blue);
129 115 }
130 116 }
131   - &.ghost {
132   - color: $color-primary;
  117 + // ghost
  118 + @mixin ghost-mixin($color) {
  119 + color: $color;
133 120 background-color: transparent;
134   - border-color: $color-primary;
  121 + border-color: $color;
135 122 &:not(.custom).button-hover {
136   - background-color: hsl(hue($color-primary), saturation($color-primary), 95%);
  123 + background-color: hsl(hue($color), saturation($color), 95%);
137 124 }
  125 + }
  126 + &.ghost {
  127 + @include ghost-mixin($color-primary);
138 128 &.red {
139   - color: $color-red;
140   - border-color: $color-red;
141   - &:not(.custom).button-hover {
142   - background-color: hsl(hue($color-red), saturation($color-red), 95%);
143   - }
  129 + @include ghost-mixin($color-red);
144 130 }
145 131 &.green {
146   - color: $color-green;
147   - border-color: $color-green;
148   - &:not(.custom).button-hover {
149   - background-color: hsl(hue($color-green), saturation($color-green), 95%);
150   - }
  132 + @include ghost-mixin($color-green);
151 133 }
152 134 &.blue {
153   - color: $color-blue;
154   - border-color: $color-blue;
155   - &:not(.custom).button-hover {
156   - background-color: hsl(hue($color-blue), saturation($color-blue), 95%);
157   - }
  135 + @include ghost-mixin($color-blue);
158 136 }
159 137 }
160   - &.link {
  138 + // link
  139 + @mixin link-mixin($color) {
161 140 background-color: transparent;
162 141 border-color: transparent;
163   - color: $color-primary;
  142 + color: $color;
164 143 &.button-hover {
165   - color: lighten($color-primary, 10%);
  144 + color: lighten($color, 10%);
166 145 }
  146 + }
  147 + &.link {
  148 + @include link-mixin($color-primary);
167 149 &.red {
168   - color: $color-red;
169   - &.button-hover {
170   - color: lighten($color-red, 10%);
171   - }
  150 + @include link-mixin($color-red);
172 151 }
173 152 &.green {
174   - color: $color-green;
175   - &.button-hover {
176   - color: lighten($color-green, 10%);
177   - }
  153 + @include link-mixin($color-green);
178 154 }
179 155 &.blue {
180   - color: $color-blue;
181   - &.button-hover {
182   - color: lighten($color-blue, 10%);
183   - }
  156 + @include link-mixin($color-blue);
184 157 }
185 158 }
186 159 &.disabled {
187   - background-color: $bg-disabled;
188   - color: $color-disabled;
  160 + filter: opacity(50%);
189 161 cursor: not-allowed;
190   - &.button-hover {
191   - background-color: $bg-disabled;
192   - }
193 162 }
194 163 &.round {
195 164 border-radius: 1.5rem;
... ...
packages/button/index.vue
  Diff comments   View file @4737d3c
... ... @@ -30,7 +30,6 @@ export default {
30 30 icon: [String, Object],
31 31 round: Boolean,
32 32 square: Boolean,
33   - disabled: Boolean,
34 33 theme: String,
35 34 color: String,
36 35 fontColor: {
... ... @@ -58,6 +57,9 @@ export default {
58 57 }
59 58 return { name: this.icon };
60 59 },
  60 + isHover() {
  61 + return this.hover && !this.disabled;
  62 + },
61 63 styleRender() {
62 64 if (this.color) {
63 65 if (this.color.includes('linear-gradient')) {
... ... @@ -65,34 +67,34 @@ export default {
65 67 color: this.fontColor,
66 68 background: this.color,
67 69 border: 'none',
68   - opacity: this.hover ? 0.9 : 1,
  70 + opacity: this.isHover ? 0.9 : 1,
69 71 };
70 72 }
71 73 if (this.type === 'primary') {
72 74 return {
73   - backgroundColor: this.hover ? color(this.color).lighten(0.2) : this.color,
74   - borderColor: this.hover ? color(this.color).lighten(0.2) : this.color,
  75 + backgroundColor: this.isHover ? color(this.color).lighten(0.2) : this.color,
  76 + borderColor: this.isHover ? color(this.color).lighten(0.2) : this.color,
75 77 };
76 78 } else if (this.type === 'secondary') {
77 79 return {
78   - backgroundColor: this.hover ? color(this.color).lightness(90) : color(this.color).lightness(95),
  80 + backgroundColor: this.isHover ? color(this.color).lightness(90) : color(this.color).lightness(95),
79 81 color: this.color,
80 82 };
81 83 } else if (this.type === 'plain') {
82 84 return {
83 85 borderColor: this.color,
84 86 color: this.color,
85   - backgroundColor: this.hover ? color(this.color).lightness(90) : color(this.color).lightness(95),
  87 + backgroundColor: this.isHover ? color(this.color).lightness(90) : color(this.color).lightness(95),
86 88 };
87 89 } else if (this.type === 'ghost') {
88 90 return {
89 91 borderColor: this.color,
90 92 color: this.color,
91   - backgroundColor: this.hover ? color(this.color).lightness(95) : undefined,
  93 + backgroundColor: this.isHover ? color(this.color).lightness(95) : undefined,
92 94 };
93 95 } else {
94 96 return {
95   - color: this.hover ? color(this.color).lighten(0.2) : this.color,
  97 + color: this.isHover ? color(this.color).lighten(0.2) : this.color,
96 98 };
97 99 }
98 100 }
... ...
packages/mixins/button.js
  Diff comments   View file @4737d3c
... ... @@ -19,6 +19,8 @@ export default {
19 19 type: Number,
20 20 default: 70,
21 21 },
  22 + // 按钮禁用
  23 + disabled: Boolean,
22 24 },
23 25 data() {
24 26 return {
... ... @@ -29,7 +31,7 @@ export default {
29 31 // 计算绑定的class对象
30 32 bindClass() {
31 33 return {
32   - [this.hoverClass]: this.hover,
  34 + [this.hoverClass]: this.hover && !this.disabled,
33 35 };
34 36 },
35 37 // 事件hack
... ... @@ -60,6 +62,9 @@ export default {
60 62 }, this.hoverStayTime);
61 63 };
62 64 });
  65 + if (this.disabled) {
  66 + delete safeEvents.click;
  67 + }
63 68 return safeEvents;
64 69 },
65 70 },
... ...