From 39ace875fb71df289f67ffdfef38592bf4a21e1d Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Mon, 13 Jul 2020 14:44:16 +0800
Subject: [PATCH] feat: 按钮支持配置图标

---
 examples/views/docs/component/button.md | 19 +++++++++++++++++++
 packages/button/index.scss              | 13 ++++++++++---
 packages/button/index.vue               | 10 ++++++++++
 3 files changed, 39 insertions(+), 3 deletions(-)

diff --git a/examples/views/docs/component/button.md b/examples/views/docs/component/button.md
index d9630f9..531f251 100644
--- a/examples/views/docs/component/button.md
+++ b/examples/views/docs/component/button.md
@@ -139,6 +139,25 @@
 
 :::
 
+## 按钮图标
+
+支持自定义图标
+
+::: snippet 配置`icon`改变图标，支持`String`、`Object`类型
+
+```html
+<template>
+  <div>
+    <zui-button icon="accountbalancewallet">Default</zui-button>
+    <zui-button :icon="{ name: 'tongzhi', svg: true }">Default</zui-button>
+    <zui-button icon="accountbalancewallet" type="primary">Primary</zui-button>
+    <zui-button :icon="{ src: 'https://dss0.bdstatic.com/5aV1bjqh_Q23odCf/static/superman/img/hot_search/top_2@1x-50e9c7fdf4.png' }" type="primary">Primary</zui-button>
+  </div>
+</template>
+```
+
+:::
+
 ## 按钮形状
 
 支持默认、圆角、矩形按钮
diff --git a/packages/button/index.scss b/packages/button/index.scss
index fcccd16..c6647e1 100644
--- a/packages/button/index.scss
+++ b/packages/button/index.scss
@@ -9,13 +9,17 @@
   transition: all 70ms ease;
 	border-radius: 0.35rem;
   position: relative;
-  display: inline-block;
-  text-align: center;
+  display: inline-flex;
+	align-items: center;
+	justify-content: center;
   border: none;
   outline: none;
 	line-height: 1.5;
 	box-sizing: border-box;
 	border: 1px solid transparent;
+	&__icon {
+		padding-right: 0.25rem;
+	}
 	&.red {
 		color: $color-red;
 	}
@@ -26,20 +30,23 @@
 		color: $color-green;
 	}
   &.block {
-    display: block;
+    display: flex;
     width: 100%;
   }
 	&.sm {
 		padding: $h-gap-sm $v-gap-sm;
 		font-size: $font-sm;
+		height: $font-sm * 3;
   }
   &.md {
 		padding: $h-gap-md $v-gap-md;
 		font-size: $font-md;
+		height: $font-md * 3;
 	}
 	&.lg {
 		padding: $h-gap-lg $v-gap-lg;
 		font-size: $font-lg;
+		height: $font-lg * 3;
 	}
 	&.default {
 		border-color: $color-border;
diff --git a/packages/button/index.vue b/packages/button/index.vue
index 8111079..cb1bc79 100644
--- a/packages/button/index.vue
+++ b/packages/button/index.vue
@@ -1,5 +1,8 @@
 <template>
   <button class="zui-button" :class="classRender" :style="styleRender" v-on="bindEvents">
+    <span v-if="icon" class="zui-button__icon">
+      <zui-icon v-bind="bindIcon"></zui-icon>
+    </span>
     <slot></slot>
   </button>
 </template>
@@ -24,6 +27,7 @@ export default {
       type: Boolean,
       default: false,
     },
+    icon: [String, Object],
     round: Boolean,
     square: Boolean,
     disabled: Boolean,
@@ -48,6 +52,12 @@ export default {
         custom: !!this.color,
       };
     },
+    bindIcon() {
+      if (typeof this.icon === 'object' && this.icon instanceof Object) {
+        return this.icon;
+      }
+      return { name: this.icon };
+    },
     styleRender() {
       if (this.color) {
         if (this.color.includes('linear-gradient')) {
--
libgit2 0.21.0