From cca584e9d57c05f3b5814175343914c82447df54 Mon Sep 17 00:00:00 2001 From: neverland Date: Sun, 10 Mar 2019 16:56:05 +0800 Subject: [PATCH] [new feature] Steps: add active-icon prop (#2934) --- packages/step/index.js | 4 +-- packages/steps/demo/index.vue | 20 +++++++++-- packages/steps/en-US.md | 20 +++++++++-- packages/steps/index.js | 4 +++ .../test/__snapshots__/demo.spec.js.snap | 31 +++++++++++++++-- packages/steps/zh-CN.md | 33 +++++++++++++++---- 6 files changed, 96 insertions(+), 16 deletions(-) diff --git a/packages/step/index.js b/packages/step/index.js index f53a14eab..45929231d 100644 --- a/packages/step/index.js +++ b/packages/step/index.js @@ -24,7 +24,7 @@ export default sfc({ render(h) { const { status } = this; - const { activeColor, direction } = this.$parent; + const { activeIcon, activeColor, direction } = this.$parent; const titleStyle = status === 'process' && { color: activeColor }; return ( @@ -36,7 +36,7 @@ export default sfc({ {status !== 'process' ? ( ) : ( - + )}
diff --git a/packages/steps/demo/index.vue b/packages/steps/demo/index.vue index c18d33a77..c953ed941 100644 --- a/packages/steps/demo/index.vue +++ b/packages/steps/demo/index.vue @@ -11,11 +11,23 @@ {{ $t('nextStep') }} + + + {{ $t('step1') }} + {{ $t('step2') }} + {{ $t('step3') }} + {{ $t('step4') }} + + +

{{ $t('status1') }}

@@ -47,7 +59,8 @@ export default { title3: '竖向步骤条', status1: '【城市】物流状态1', status2: '【城市】物流状态', - status3: '快件已发货' + status3: '快件已发货', + customStyle: '自定义样式' }, 'en-US': { nextStep: 'Next Step', @@ -59,7 +72,8 @@ export default { title3: 'Vertical Steps', status1: '【City】Status1', status2: '【City】Status2', - status3: '【City】Status3' + status3: '【City】Status3', + customStyle: 'Custom Style' } }, diff --git a/packages/steps/en-US.md b/packages/steps/en-US.md index 879ff611b..c1f6bf576 100644 --- a/packages/steps/en-US.md +++ b/packages/steps/en-US.md @@ -30,10 +30,25 @@ export default { } ``` +#### Custom Style + +```html + + Step1 + Step2 + Step3 + Step4 + +``` + #### Vertical Steps ```html - +

【City】Status1

2016-07-12 12:40

@@ -58,7 +73,8 @@ export default { | icon-class | Icon class | `String` | - | | title | Title | `String` | - | | description | Description | `String` | - | -| direction | Can be set to `horizontal` `vertical` | `String` | `horizontal` | +| direction | Can be set to `vertical` | `String` | `horizontal` | +| active-icon | Active icon name | `String` | `checked` | | active-color | Active step color | `String` | `#07c160` | ### Steps Slot diff --git a/packages/steps/index.js b/packages/steps/index.js index 48c4dfc0a..0c2e84fed 100644 --- a/packages/steps/index.js +++ b/packages/steps/index.js @@ -18,6 +18,10 @@ export default sfc({ activeColor: { type: String, default: GREEN + }, + activeIcon: { + type: String, + default: 'checked' } }, diff --git a/packages/steps/test/__snapshots__/demo.spec.js.snap b/packages/steps/test/__snapshots__/demo.spec.js.snap index 65551e268..1194cf2e9 100644 --- a/packages/steps/test/__snapshots__/demo.spec.js.snap +++ b/packages/steps/test/__snapshots__/demo.spec.js.snap @@ -29,15 +29,42 @@ exports[`renders demo correctly 1`] = `
+
+
+
+
+
买家下单
+
+
+
+
+
商家接单
+
+
+
+
+
+
买家提货
+
+
+
+
+
交易完成
+
+
+
+
+
+
-
+

【城市】物流状态1

2016-07-12 12:40

-
+
diff --git a/packages/steps/zh-CN.md b/packages/steps/zh-CN.md index 926bd1d13..cc012267e 100644 --- a/packages/steps/zh-CN.md +++ b/packages/steps/zh-CN.md @@ -30,11 +30,29 @@ export default { } ``` -#### 竖向步骤条 -可以通过设置`direction`属性来改变步骤条的显示方式 +#### 自定义样式 + +可以通过`active-icon`和`active-color`属性设置激活状态下的图标和颜色 ```html - + + 买家下单 + 商家接单 + 买家提货 + 交易完成 + +``` + +#### 竖向步骤条 + +可以通过设置`direction`属性来改变步骤条的显示方向 + +```html +

【城市】物流状态1

2016-07-12 12:40

@@ -55,11 +73,12 @@ export default { | 参数 | 说明 | 类型 | 默认值 | 版本 | |------|------|------|------|------| | active | 当前步骤 | `Number` | 0 | - | -| title | 描述栏标题 | `String` | - | - | -| description | 描述栏文字 | `String` | - | - | -| icon | 描述栏图标 | `String` | - | - | -| icon-class | 图标额外类名 | `String` | - | - | +| title | 顶部描述栏标题 | `String` | - | - | +| description | 顶部描述栏文字 | `String` | - | - | +| icon | 顶部描述栏图标 | `String` | - | - | +| icon-class | 顶部描述栏图标额外类名 | `String` | - | - | | direction | 显示方向，可选值为 `vertical` | `String` | `horizontal` | - | +| active-icon | 激活状态底部图标，可选值见 Icon 组件 | `String` | `checked` | 1.6.9 | | active-color | 激活状态颜色 | `String` | `#07c160` | - | ### Steps Slot