feat(GoodsActionButton): add color prop (#2010)

example/pages/goods-action/index.wxml

@@ -32,4 +32,13 @@
   </van-goods-action>
 </demo-block>
 
+<demo-block title="自定义按钮颜色">
+  <van-goods-action custom-class="goods-action" safe-area-inset-bottom="{{ false }}">
+    <van-goods-action-icon icon="chat-o" text="客服" />
+    <van-goods-action-icon icon="shop-o" text="店铺" />
+    <van-goods-action-button color="#be99ff" type="warning" text="加入购物车" />
+    <van-goods-action-button color="#7232dd" type="danger" text="立即购买" />
+  </van-goods-action>
+</demo-block>
+
 <van-toast id="van-toast" />

packages/goods-action-button/index.ts

@@ -9,6 +9,7 @@ VantComponent({
 
   props: {
     text: String,
+    color: String,
     loading: Boolean,
     disabled: Boolean,
     type: {

packages/goods-action-button/index.wxml

@@ -4,6 +4,7 @@
   size="large"
   lang="{{ lang }}"
   type="{{ type }}"
+  color="{{ color }}"
   loading="{{ loading }}"
   disabled="{{ disabled }}"
   open-type="{{ openType }}"

packages/goods-action/README.md

@@ -66,6 +66,20 @@ Page({
 </van-goods-action>
 ```
 
+### 自定义按钮颜色
+
+通过`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色
+
+```html
+<van-goods-action>
+  <van-goods-action-icon icon="chat-o" text="客服" />
+  <van-goods-action-icon icon="cart-o" text="购物车" info="5" />
+  <van-goods-action-icon icon="shop-o" text="店铺" />
+  <van-goods-action-button text="加入购物车" type="warning" />
+  <van-goods-action-button text="立即购买" />
+</van-goods-action>
+```
+
 ## API
 
 ### GoodsAction API
@@ -100,6 +114,7 @@ Page({
 | 参数 | 说明 | 类型 | 默认值 | 版本 |
 |-----------|-----------|-----------|-------------|-------------|
 | text | 按钮文字 | *string* | - | - |
+| color | 按钮颜色，支持传入 `linear-gradient` 渐变色 | *string* | - | - |
 | url | 跳转链接 | *string* | - | - |
 | link-type | 链接跳转类型，可选值为 `redirectTo` `switchTab` `reLaunch` | *string* | `navigateTo` | - |
 | id | 标识符 | *string* | - | - |