perf: 优化按钮禁用逻辑

刘汉宸
1 parent 39ace875
Showing 4 changed files with 89 additions and 97 deletions Show diff stats
examples/views/docs/component/button.md
packages/button/index.scss
packages/button/index.vue
packages/mixins/button.js
@@ -32,6 +32,14 @@
 <template>
   <div>
     <div style="padding-top: 10px;">
+      <zui-button>Default</zui-button>
+      <zui-button type="primary">Primary</zui-button>
+      <zui-button type="secondary">Secondary</zui-button>
+      <zui-button type="plain">Plain</zui-button>
+      <zui-button type="ghost">Ghost</zui-button>
+      <zui-button type="link">Link</zui-button>
+    </div>
+    <div style="padding-top: 10px;">
       <zui-button theme="red">Default</zui-button>
       <zui-button type="primary" theme="red">Primary</zui-button>
       <zui-button type="secondary" theme="red">Secondary</zui-button>
@@ -221,14 +229,22 @@
 ```html
 <template>
   <div>
-    <zui-button type="primary" @click="handleClick">普通按钮</zui-button>
-    <zui-button disabled @click="handleClick">禁用按钮</zui-button>
+    <zui-button @click="toggleDisabled">切换禁用状态</zui-button>
+    <zui-button :disabled="disabled" type="primary" @click="handleClick">按钮</zui-button>
   </div>
 </template>
 <script>
 export default {
+  data() {
+    return {
+      disabled: true
+    }
+  },
   methods: {
+    toggleDisabled() {
+      this.disabled = !this.disabled;
+    },
     handleClick() {
       console.log('click');
     }
@@ -4,7 +4,6 @@
   padding: $h-gap-md $v-gap-md;
   font-size: $font-md;
   font-weight: normal;
-  font-family: Helvetica Neue, Helvetica, PingFang SC, Hiragino Sans GB, Microsoft YaHei, SimSun, sans-serif;
   cursor: pointer;
   transition: all 70ms ease;
 	border-radius: 0.35rem;
@@ -54,142 +53,112 @@
 	&.button-hover {
 		background-color: $bg-active;
 	}
-	@mixin fill-mixin($color) {
+	// primary
+	@mixin primary-mixin($bgColor) {
+		background-color: $bgColor;
+		color: #fff;
 		&.button-hover {
-			background-color: $color;
+			background-color: lighten($bgColor, 10%);
 		}
 	}
 	&.primary {
-		background-color: $color-primary;
-		color: #FFF;
-		@include fill-mixin(lighten($color-primary, 10%));
+		@include primary-mixin($color-primary);
 		&.red {
-			background-color: $color-red;
-			@include fill-mixin(lighten($color-red, 10%));
+			@include primary-mixin($color-red);
 		}
 		&.green {
-			background-color: $color-green;
-			@include fill-mixin(lighten($color-green, 10%));
+			@include primary-mixin($color-green);
 		}
 		&.blue {
-			background-color: $color-blue;
-			@include fill-mixin(lighten($color-blue, 10%));
+			@include primary-mixin($color-blue);
+		}
+	}
+	// secondary
+	@mixin secondary-mixin($color) {
+		color: $color;
+		background-color: hsl(hue($color), saturation($color), 95%);
+		&.button-hover {
+			background-color: hsl(hue($color), saturation($color), 90%);
 		}
 	}
 	&.secondary {
-		color: $color-primary;
-		background-color: hsl(hue($color-primary), saturation($color-primary), 95%);
-		@include fill-mixin(hsl(hue($color-primary), saturation($color-primary), 90%));
+		@include secondary-mixin($color-primary);
 		&.red {
-			color: $color-red;
-			background-color: hsl(hue($color-red), saturation($color-red), 95%);
-			@include fill-mixin(hsl(hue($color-red), saturation($color-red), 90%));
+			@include secondary-mixin($color-red);
 		}
 		&.green {
-			color: $color-green;
-			background-color: hsl(hue($color-green), saturation($color-green), 95%);
-			@include fill-mixin(hsl(hue($color-green), saturation($color-green), 90%));
+			@include secondary-mixin($color-green);
 		}
 		&.blue {
-			color: $color-blue;
-			background-color: hsl(hue($color-blue), saturation($color-blue), 95%);
-			@include fill-mixin(hsl(hue($color-blue), saturation($color-blue), 90%));
+			@include secondary-mixin($color-blue);
 		}
 	}
-	&.plain {
-		color: $color-primary;
-		background-color: hsl(hue($color-primary), saturation($color-primary), 95%);
-		border-color: $color-primary;
+	// plain
+	@mixin plain-mixin($color) {
+		color: $color;
+		background-color: hsl(hue($color), saturation($color), 95%);
+		border-color: $color;
 		&:not(.custom).button-hover {
-			background-color: hsl(hue($color-primary), saturation($color-primary), 95%);
+			background-color: hsl(hue($color), saturation($color), 90%);
 		}
+	}
+	&.plain {
+		@include plain-mixin($color-primary);
 		&.red {
-			color: $color-red;
-			border-color: $color-red;
-			background-color: hsl(hue($color-red), saturation($color-red), 95%);
-			&:not(.custom).button-hover {
-				background-color: hsl(hue($color-red), saturation($color-red), 90%);
-			}
+			@include plain-mixin($color-red);
 		}
 		&.green {
-			color: $color-green;
-			border-color: $color-green;
-			background-color: hsl(hue($color-green), saturation($color-green), 95%);
-			&:not(.custom).button-hover {
-				background-color: hsl(hue($color-green), saturation($color-green), 90%);
-			}
+			@include plain-mixin($color-green);
 		}
 		&.blue {
-			color: $color-blue;
-			border-color: $color-blue;
-			background-color: hsl(hue($color-blue), saturation($color-blue), 95%);
-			&:not(.custom).button-hover {
-				background-color: hsl(hue($color-blue), saturation($color-blue), 90%);
-			}
+			@include plain-mixin($color-blue);
 		}
 	}
-	&.ghost {
-		color: $color-primary;
+	// ghost
+	@mixin ghost-mixin($color) {
+		color: $color;
 		background-color: transparent;
-		border-color: $color-primary;
+		border-color: $color;
 		&:not(.custom).button-hover {
-			background-color: hsl(hue($color-primary), saturation($color-primary), 95%);
+			background-color: hsl(hue($color), saturation($color), 95%);
 		}
+	}
+	&.ghost {
+		@include ghost-mixin($color-primary);
 		&.red {
-			color: $color-red;
-			border-color: $color-red;
-			&:not(.custom).button-hover {
-				background-color: hsl(hue($color-red), saturation($color-red), 95%);
-			}
+			@include ghost-mixin($color-red);
 		}
 		&.green {
-			color: $color-green;
-			border-color: $color-green;
-			&:not(.custom).button-hover {
-				background-color: hsl(hue($color-green), saturation($color-green), 95%);
-			}
+			@include ghost-mixin($color-green);
 		}
 		&.blue {
-			color: $color-blue;
-			border-color: $color-blue;
-			&:not(.custom).button-hover {
-				background-color: hsl(hue($color-blue), saturation($color-blue), 95%);
-			}
+			@include ghost-mixin($color-blue);
 		}
 	}
-	&.link {
+	// link
+	@mixin link-mixin($color) {
 		background-color: transparent;
 		border-color: transparent;
-		color: $color-primary;
+		color: $color;
 		&.button-hover {
-			color: lighten($color-primary, 10%);
+			color: lighten($color, 10%);
 		}
+	}
+	&.link {
+		@include link-mixin($color-primary);
 		&.red {
-			color: $color-red;
-			&.button-hover {
-				color: lighten($color-red, 10%);
-			}
+			@include link-mixin($color-red);
 		}
 		&.green {
-			color: $color-green;
-			&.button-hover {
-				color: lighten($color-green, 10%);
-			}
+			@include link-mixin($color-green);
 		}
 		&.blue {
-			color: $color-blue;
-			&.button-hover {
-				color: lighten($color-blue, 10%);
-			}
+			@include link-mixin($color-blue);
 		}
 	}
 	&.disabled {
-		background-color: $bg-disabled;
-		color: $color-disabled;
+		filter: opacity(50%);
 		cursor: not-allowed;
-		&.button-hover {
-			background-color: $bg-disabled;
-		}
 	}
 	&.round {
 		border-radius: 1.5rem;
@@ -30,7 +30,6 @@ export default {
     icon: [String, Object],
     round: Boolean,
     square: Boolean,
-    disabled: Boolean,
     theme: String,
     color: String,
     fontColor: {
@@ -58,6 +57,9 @@ export default {
       }
       return { name: this.icon };
     },
+    isHover() {
+      return this.hover && !this.disabled;
+    },
     styleRender() {
       if (this.color) {
         if (this.color.includes('linear-gradient')) {
@@ -65,34 +67,34 @@ export default {
             color: this.fontColor,
             background: this.color,
             border: 'none',
-            opacity: this.hover ? 0.9 : 1,
+            opacity: this.isHover ? 0.9 : 1,
           };
         }
         if (this.type === 'primary') {
           return {
-            backgroundColor: this.hover ? color(this.color).lighten(0.2) : this.color,
-            borderColor: this.hover ? color(this.color).lighten(0.2) : this.color,
+            backgroundColor: this.isHover ? color(this.color).lighten(0.2) : this.color,
+            borderColor: this.isHover ? color(this.color).lighten(0.2) : this.color,
           };
         } else if (this.type === 'secondary') {
           return {
-            backgroundColor: this.hover ? color(this.color).lightness(90) : color(this.color).lightness(95),
+            backgroundColor: this.isHover ? color(this.color).lightness(90) : color(this.color).lightness(95),
             color: this.color,
           };
         } else if (this.type === 'plain') {
           return {
             borderColor: this.color,
             color: this.color,
-            backgroundColor: this.hover ? color(this.color).lightness(90) : color(this.color).lightness(95),
+            backgroundColor: this.isHover ? color(this.color).lightness(90) : color(this.color).lightness(95),
           };
         } else if (this.type === 'ghost') {
           return {
             borderColor: this.color,
             color: this.color,
-            backgroundColor: this.hover ? color(this.color).lightness(95) : undefined,
+            backgroundColor: this.isHover ? color(this.color).lightness(95) : undefined,
           };
         } else {
           return {
-            color: this.hover ? color(this.color).lighten(0.2) : this.color,
+            color: this.isHover ? color(this.color).lighten(0.2) : this.color,
           };
         }
       }
@@ -19,6 +19,8 @@ export default {
       type: Number,
       default: 70,
     },
+    // 按钮禁用
+    disabled: Boolean,
   },
   data() {
     return {
@@ -29,7 +31,7 @@ export default {
     // 计算绑定的class对象
     bindClass() {
       return {
-        [this.hoverClass]: this.hover,
+        [this.hoverClass]: this.hover && !this.disabled,
       };
     },
     // 事件hack
@@ -60,6 +62,9 @@ export default {
           }, this.hoverStayTime);
         };
       });
+      if (this.disabled) {
+        delete safeEvents.click;
+      }
       return safeEvents;
     },
   },