From 67d3b6d34452501040f5edc533ac323da9342692 Mon Sep 17 00:00:00 2001
From: 刘汉宸 <liuhanchen@zeyihuoyun.com>
Date: Mon, 13 Jul 2020 11:59:33 +0800
Subject: [PATCH] feat: 优化Button支持渐变颜色

---
 examples/views/docs/component/button.md | 11 +++++++++++
 packages/button/index.vue               | 12 ++++++++++++
 2 files changed, 23 insertions(+), 0 deletions(-)

diff --git a/examples/views/docs/component/button.md b/examples/views/docs/component/button.md
index 981eacc..d9630f9 100644
--- a/examples/views/docs/component/button.md
+++ b/examples/views/docs/component/button.md
@@ -126,6 +126,13 @@
       <zui-button type="ghost" color="#000">Ghost</zui-button>
       <zui-button type="link" color="#000">Link</zui-button>
     </div>
+    <div style="padding-top: 10px;">
+      <zui-button color="linear-gradient(to right, #4bb0ff, #6149f6)">渐变</zui-button>
+      <zui-button color="linear-gradient(-20deg, #b721ff 0%, #21d4fd 100%)" round>渐变</zui-button>
+      <zui-button color="linear-gradient(to bottom right, #FDD108, #FFA000)" font-color="#333">渐变</zui-button>
+      <zui-button color="linear-gradient(to bottom right, #F39800, #FF6400)">渐变</zui-button>
+      <zui-button color="linear-gradient(to bottom right, #14C3A5, #117361)">渐变</zui-button>
+    </div>
   </div>
 </template>
 ```
@@ -220,10 +227,14 @@ export default {
 参数|说明|类型|可选值|默认值
 -|-|-|-|-
 type | 按钮类型 | String | default,primary,secondary | default
+size | 按钮大小 | String | ms,md,lg | md
 block | 块状按钮 | Boolean | true,false | false
 round | 圆角按钮 | Boolean | true,false | false
 square | 矩形按钮 | Boolean | true,false | false
 disabled | 按钮禁用 | Boolean | true,false | false
+theme | 按钮主题 | String | red,green,blue | -
+color | 按钮颜色 | String | - | -
+fontColor | 按钮文本颜色，只在color为linear-gradient模式下生效 | String | - | #FFF
 
 ## Events 事件
 
diff --git a/packages/button/index.vue b/packages/button/index.vue
index c233cf4..8111079 100644
--- a/packages/button/index.vue
+++ b/packages/button/index.vue
@@ -29,6 +29,10 @@ export default {
     disabled: Boolean,
     theme: String,
     color: String,
+    fontColor: {
+      type: String,
+      default: '#FFF',
+    },
   },
   computed: {
     classRender() {
@@ -46,6 +50,14 @@ export default {
     },
     styleRender() {
       if (this.color) {
+        if (this.color.includes('linear-gradient')) {
+          return {
+            color: this.fontColor,
+            background: this.color,
+            border: 'none',
+            opacity: this.hover ? 0.9 : 1,
+          };
+        }
         if (this.type === 'primary') {
           return {
             backgroundColor: this.hover ? color(this.color).lighten(0.2) : this.color,
--
libgit2 0.21.0