feat(Button): color prop support gradient color (#1944)

docs/markdown/changelog.md

@@ -20,6 +20,10 @@
 
 #### 新特性
 
+##### Button
+
+- `color`属性支持渐变色
+
 ##### Popup
 
 - 新增`round`属性

packages/button/README.md

@@ -103,6 +103,7 @@
 | id | 标识符 | *string* | - |
 | type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | *string* | `default` |
 | size | 按钮尺寸，可选值为 `normal` `large` `small` `mini` | *string* | `normal` |
+| color | 按钮颜色，支持传入`linear-gradient`渐变色 | *string* | - |
 | icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | *string* | - |
 | plain | 是否为朴素按钮 | *boolean* | `false` |
 | block | 是否为块级元素 | *boolean* | `false` |

packages/button/index.ts

@@ -7,9 +7,12 @@ VantComponent({
 
   classes: ['hover-class', 'loading-class'],
 
+  data: {
+    style: ''
+  },
+
   props: {
     icon: String,
-    color: String,
     plain: Boolean,
     block: Boolean,
     round: Boolean,
@@ -29,6 +32,32 @@ VantComponent({
     loadingSize: {
       type: String,
       value: '20px'
+    },
+    color: {
+      type: String,
+      observer(color: string) {
+        let style = '';
+
+        if (color) {
+          style += `color: ${this.data.plain ? color : 'white'};`;
+
+          if (!this.data.plain) {
+            // Use background instead of backgroundColor to make linear-gradient work
+            style += `background: ${color};`;
+          }
+
+          // hide border when color is linear-gradient
+          if (color.indexOf('gradient') !== -1) {
+            style += 'border: 0;';
+          } else {
+            style += `border-color: ${color};`;
+          }
+        }
+
+        if (style !== this.data.style) {
+          this.setData({ style });
+        }
+      }
     }
   },
 

packages/button/index.wxml

@@ -3,10 +3,10 @@
 <button
   id="{{ id }}"
   class="custom-class {{ utils.bem('button', [type, size, { block, round, plain, square, loading, disabled, hairline, unclickable: disabled || loading }]) }} {{ hairline ? 'van-hairline--surround' : '' }}"
-  open-type="{{ openType }}"
   hover-class="van-button--active hover-class"
-  style="{{ color ? 'border-color: ' + color + ';' + (plain ? 'color: ' + color : 'color: #fff; background-color: ' + color) : '' }}"
   lang="{{ lang }}"
+  style="{{ style }}"
+  open-type="{{ openType }}"
   business-id="{{ businessId }}"
   session-from="{{ sessionFrom }}"
   send-message-title="{{ sendMessageTitle }}"