From a842da803f634433a238b25c2b5e1a088e3836bd Mon Sep 17 00:00:00 2001 From: neverland Date: Tue, 27 Aug 2019 17:13:12 +0800 Subject: [PATCH] feat(GoodsActionButton): add color prop (#4255) --- src/button/README.md | 2 +- src/button/README.zh-CN.md | 2 +- src/goods-action-button/index.js | 2 + src/goods-action/README.md | 62 ++++++---------- src/goods-action/README.zh-CN.md | 64 ++++++----------- src/goods-action/demo/index.vue | 70 ++++++------------- .../test/__snapshots__/demo.spec.js.snap | 14 ++++ 7 files changed, 84 insertions(+), 132 deletions(-) diff --git a/src/button/README.md b/src/button/README.md index 9063094b8..da1073d2c 100644 --- a/src/button/README.md +++ b/src/button/README.md @@ -97,7 +97,7 @@ Vue.use(Button); | type | Can be set to `primary` `info` `warning` `danger` | `string` | `default` | | size | Can be set to `large` `small` `mini` | `string` | `normal` | | text | Text | `string` | - | -| color | Color | `string` | - | +| color | Color, support linear-gradient | `string` | - | | icon | Left Icon | `string` | - | | tag | HTML Tag | `string` | `button` | | native-type | Native Type Attribute | `string` | `''` | diff --git a/src/button/README.zh-CN.md b/src/button/README.zh-CN.md index 499c47521..a2e15e318 100644 --- a/src/button/README.zh-CN.md +++ b/src/button/README.zh-CN.md @@ -117,7 +117,7 @@ Vue.use(Button); | type | 类型，可选值为 `primary` `info` `warning` `danger` | `string` | `default` | 1.6.6 | | size | 尺寸，可选值为 `large` `small` `mini` | `string` | `normal` | - | | text | 按钮文字 | `string` | - | - | -| color | 按钮颜色 | `string` | - | 2.1.3 | +| color | 按钮颜色，支持传入`linear-gradient`渐变色 | `string` | - | 2.1.3 | | icon | 左侧图标名称或图片链接，可选值见 Icon 组件 | `string` | - | 2.0.0 | | tag | HTML 标签 | `string` | `button` | - | | native-type | 原生 button 标签 type 属性 | `string` | - | - | diff --git a/src/goods-action-button/index.js b/src/goods-action-button/index.js index 470f6632c..adda27524 100644 --- a/src/goods-action-button/index.js +++ b/src/goods-action-button/index.js @@ -12,6 +12,7 @@ export default createComponent({ ...routeProps, type: String, text: String, + color: String, loading: Boolean, disabled: Boolean }, @@ -48,6 +49,7 @@ export default createComponent({ square size="large" type={this.type} + color={this.color} loading={this.loading} disabled={this.disabled} onClick={this.onClick} diff --git a/src/goods-action/README.md b/src/goods-action/README.md index e99290b85..8fdccd34b 100644 --- a/src/goods-action/README.md +++ b/src/goods-action/README.md @@ -22,26 +22,10 @@ Vue ```html - - - - + + + + ``` @@ -64,27 +48,22 @@ Use `info` prop to show messages in upper right corner of icon ```html - - - - - + + + + + + +``` + +### Custom Button Color + +```html + + + + + ``` @@ -114,6 +93,7 @@ Use `info` prop to show messages in upper right corner of icon |------|------|------|------| | type | Button type, Can be set to `primary` `info` `warning` `danger` | `string` | `default` | | text | Button text | `string` | - | +| color | Button color, support linear-gradient | `string` | - | | primary | Is primary button (red color) | `boolean` | `false` | | disabled | Whether to disable button | `boolean` | `false` | | loading | Whether show loading status | `boolean` | `false` | diff --git a/src/goods-action/README.zh-CN.md b/src/goods-action/README.zh-CN.md index 13b22adf3..c96d88649 100644 --- a/src/goods-action/README.zh-CN.md +++ b/src/goods-action/README.zh-CN.md @@ -22,26 +22,10 @@ Vue ```html - - - - + + + + ``` @@ -64,27 +48,24 @@ export default { ```html - - - - - + + + + + + +``` + +### 自定义按钮颜色 + +通过`color`属性可以自定义按钮的颜色，支持传入`linear-gradient`渐变色 + +```html + + + + + ``` @@ -114,6 +95,7 @@ export default { |------|------|------|------|------| | text | 按钮文字 | `string` | - | - | | type | 按钮类型，可选值为 `primary` `info` `warning` `danger` | `string` | `default` | 2.0.0 | +| color | 按钮颜色，支持传入`linear-gradient`渐变色 | `string` | - | 2.1.8 | | disabled | 是否禁用按钮 | `boolean` | `false` | - | - | | loading | 是否显示为加载状态 | `boolean` | `false` | - | - | | url | 跳转链接 | `string` | - | - | diff --git a/src/goods-action/demo/index.vue b/src/goods-action/demo/index.vue index ec6e3ed54..16faedc8f 100644 --- a/src/goods-action/demo/index.vue +++ b/src/goods-action/demo/index.vue @@ -3,57 +3,29 @@ - - - - + + + + - - - - - + + + + + + + + + + + + + + @@ -70,7 +42,8 @@ export default { icon3: '店铺', button1: '加入购物车', button2: '立即购买', - title2: '图标提示' + title2: '图标提示', + customButtonColor: '自定义按钮颜色' }, 'en-US': { clickIcon: 'Click Icon', @@ -80,7 +53,8 @@ export default { icon3: 'Icon3', button1: 'Button1', button2: 'Button2', - title2: 'Icon info' + title2: 'Icon info', + customButtonColor: 'Custom Button Color' } }, methods: { diff --git a/src/goods-action/test/__snapshots__/demo.spec.js.snap b/src/goods-action/test/__snapshots__/demo.spec.js.snap index 1dfc42768..f89a54791 100644 --- a/src/goods-action/test/__snapshots__/demo.spec.js.snap +++ b/src/goods-action/test/__snapshots__/demo.spec.js.snap @@ -35,5 +35,19 @@ exports[`renders demo correctly 1`] = ` +
+
+
+
+ +
客服 +
+
+
+ +
购物车 +
+
+
`;