fix: 修复Button组件基线，支持圆形

刘汉宸
1 parent 4737d3cd
Showing 3 changed files with 47 additions and 24 deletions Show diff stats
examples/views/docs/component/button.md
packages/button/index.scss
packages/button/index.vue
@@ -178,6 +178,8 @@
     <zui-button>默认按钮</zui-button>
     <zui-button round>圆角按钮</zui-button>
     <zui-button square>矩形按钮</zui-button>
+    <zui-button circle>圆</zui-button>
+    <zui-button circle icon="search" color="linear-gradient(to right, #4bb0ff, #6149f6)"></zui-button>
   </div>
 </template>
 ```
 .zui-button {
-  color: #323233;
-  background-color: #fff;
-  padding: $h-gap-md $v-gap-md;
-  font-size: $font-md;
-  font-weight: normal;
+  color: $color-text;
+  background-color: $color-white;
   cursor: pointer;
-  transition: all 70ms ease;
 	border-radius: 0.35rem;
-  position: relative;
   display: inline-flex;
 	align-items: center;
 	justify-content: center;
@@ -16,6 +11,7 @@
 	line-height: 1.5;
 	box-sizing: border-box;
 	border: 1px solid transparent;
+	vertical-align: middle;
 	&__icon {
 		padding-right: 0.25rem;
 	}
@@ -36,16 +32,37 @@
 		padding: $h-gap-sm $v-gap-sm;
 		font-size: $font-sm;
 		height: $font-sm * 3;
+		&.circle {
+			height: $font-sm * 3;
+			width: $font-sm * 3;
+			.zui-icon {
+				font-size: $font-md;
+			}
+		}
   }
   &.md {
 		padding: $h-gap-md $v-gap-md;
 		font-size: $font-md;
 		height: $font-md * 3;
+		&.circle {
+			height: $font-md * 3;
+			width: $font-md * 3;
+			.zui-icon {
+				font-size: $font-lg;
+			}
+		}
 	}
 	&.lg {
 		padding: $h-gap-lg $v-gap-lg;
 		font-size: $font-lg;
 		height: $font-lg * 3;
+		&.circle {
+			height: $font-lg * 3;
+			width: $font-lg * 3;
+			.zui-icon {
+				font-size: $font-lg * 1.5;
+			}
+		}
 	}
 	&.default {
 		border-color: $color-border;
@@ -166,4 +183,12 @@
 	&.square {
 		border-radius: 0;
 	}
+	&.circle {
+		border-radius: 50%;
+		overflow: hidden;
+		line-height: 1;
+		.zui-button__icon {
+			padding-right: 0;
+		}
+	}
 }
 \ No newline at end of file
@@ -29,6 +29,7 @@ export default {
     },
     icon: [String, Object],
     round: Boolean,
+    circle: Boolean,
     square: Boolean,
     theme: String,
     color: String,
@@ -47,6 +48,7 @@ export default {
         disabled: this.disabled,
         block: this.block,
         round: this.round,
+        circle: this.circle,
         square: this.square,
         custom: !!this.color,
       };
@@ -70,33 +72,27 @@ export default {
             opacity: this.isHover ? 0.9 : 1,
           };
         }
-        if (this.type === 'primary') {
-          return {
+        const config = {
+          primary: {
             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 {
+          },
+          secondary: {
             backgroundColor: this.isHover ? color(this.color).lightness(90) : color(this.color).lightness(95),
             color: this.color,
-          };
-        } else if (this.type === 'plain') {
-          return {
+          },
+          plain: {
             borderColor: this.color,
             color: this.color,
             backgroundColor: this.isHover ? color(this.color).lightness(90) : color(this.color).lightness(95),
-          };
-        } else if (this.type === 'ghost') {
-          return {
+          },
+          ghost: {
             borderColor: this.color,
             color: this.color,
             backgroundColor: this.isHover ? color(this.color).lightness(95) : undefined,
-          };
-        } else {
-          return {
-            color: this.isHover ? color(this.color).lighten(0.2) : this.color,
-          };
-        }
+          },
+        };
+        return config[this.type] || { color: this.isHover ? color(this.color).lighten(0.2) : this.color };
       }
       return {};
     },