diff --git a/docs/markdown/v2-progress-tracking.md b/docs/markdown/v2-progress-tracking.md
index 1e3a92975..6a369c1de 100644
--- a/docs/markdown/v2-progress-tracking.md
+++ b/docs/markdown/v2-progress-tracking.md
@@ -72,6 +72,10 @@
- 新增`left-icon`插槽
- 新增`right-icon`插槽
+### Steps
+
+- 新增`inactive-icon`属性
+
### SwitchCell
- 新增`border`属性
diff --git a/packages/step/index.js b/packages/step/index.js
index 33eae2f5f..68bc5aaa4 100644
--- a/packages/step/index.js
+++ b/packages/step/index.js
@@ -30,24 +30,32 @@ export default sfc({
},
render(h) {
- const { status } = this;
- const { activeIcon, activeColor, direction } = this.$parent;
+ const { slots, status } = this;
+ const { activeIcon, activeColor, inactiveIcon, direction } = this.$parent;
const titleStyle = status === 'process' && { color: activeColor };
+ function Circle() {
+ if (status === 'process') {
+ return (
+ slots('active-icon') || (
+
+ )
+ );
+ }
+
+ if (inactiveIcon) {
+ return ;
+ }
+
+ return ;
+ }
+
return (
{this.slots()}
-
- {status !== 'process' ? (
-
- ) : (
- this.slots('active-icon') || (
-
- )
- )}
-
+
{Circle()}
);
diff --git a/packages/step/index.less b/packages/step/index.less
index eec67aa46..701f35fb3 100644
--- a/packages/step/index.less
+++ b/packages/step/index.less
@@ -42,18 +42,19 @@
.van-step__circle-container {
position: absolute;
- top: 28px;
+ top: 30px;
left: -8px;
padding: 0 8px;
- background-color: @white;
z-index: 1;
+ background-color: @white;
+ transform: translateY(-50%);
}
.van-step__title {
- font-size: 12px;
- transform: translate3d(-50%, 0, 0);
display: inline-block;
+ font-size: 12px;
margin-left: 3px;
+ transform: translateX(-50%);
}
.van-step__line {
@@ -65,18 +66,13 @@
background-color: @border-color;
}
- &.van-step--process {
+ .van-step__icon {
+ display: block;
+ font-size: 12px;
+ }
+
+ .van-step--process {
color: @text-color;
-
- .van-step__circle-container {
- top: 24px;
- }
-
- .van-icon {
- font-size: 12px;
- color: @green;
- display: block;
- }
}
}
@@ -104,14 +100,14 @@
}
}
- .van-step__circle-container > i {
+ .van-step__circle-container {
position: absolute;
z-index: 2;
- }
-
- .van-step__circle {
- top: 16px;
- left: -17px;
+ top: 19px;
+ left: -15px;
+ line-height: 1;
+ font-size: 12px;
+ transform: translate(-50%, -50%);
}
.van-step__line {
@@ -122,15 +118,6 @@
height: 100%;
background-color: @border-color;
}
-
- &.van-step--process {
- .van-icon {
- top: 12px;
- left: -20px;
- line-height: 1;
- font-size: 12px;
- }
- }
}
&:last-child {
diff --git a/packages/steps/demo/index.vue b/packages/steps/demo/index.vue
index c953ed941..ac43bc035 100644
--- a/packages/steps/demo/index.vue
+++ b/packages/steps/demo/index.vue
@@ -15,6 +15,7 @@
{{ $t('step1') }}
diff --git a/packages/steps/en-US.md b/packages/steps/en-US.md
index 4894ed225..163e0ba7f 100644
--- a/packages/steps/en-US.md
+++ b/packages/steps/en-US.md
@@ -71,8 +71,9 @@ export default {
| active | Active step | `Number` | 0 |
| description | Description | `String` | - |
| direction | Can be set to `vertical` | `String` | `horizontal` |
-| active-icon | Active icon name | `String` | `checked` |
| active-color | Active step color | `String` | `#07c160` |
+| active-icon | Active icon name | `String` | `checked` |
+| inactive-icon | Active icon name | `String` | - |
### Step Slot
diff --git a/packages/steps/index.js b/packages/steps/index.js
index 0e23fc694..d8729a590 100644
--- a/packages/steps/index.js
+++ b/packages/steps/index.js
@@ -6,6 +6,7 @@ const [sfc, bem] = use('steps');
export default sfc({
props: {
active: Number,
+ inactiveIcon: String,
direction: {
type: String,
default: 'horizontal'
diff --git a/packages/steps/test/__snapshots__/demo.spec.js.snap b/packages/steps/test/__snapshots__/demo.spec.js.snap
index 75fe9be16..1a65d658d 100644
--- a/packages/steps/test/__snapshots__/demo.spec.js.snap
+++ b/packages/steps/test/__snapshots__/demo.spec.js.snap
@@ -12,7 +12,7 @@ exports[`renders demo correctly 1`] = `
商家接单
-
@@ -34,23 +34,26 @@ exports[`renders demo correctly 1`] = `
@@ -64,7 +67,7 @@ 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 153d09ecd..833e8a881 100644
--- a/packages/steps/zh-CN.md
+++ b/packages/steps/zh-CN.md
@@ -74,8 +74,9 @@ export default {
|------|------|------|------|------|
| active | 当前步骤 | `Number` | 0 | - |
| direction | 显示方向,可选值为 `vertical` | `String` | `horizontal` | - |
-| active-icon | 激活状态底部图标,可选值见 Icon 组件 | `String` | `checked` | 1.6.9 |
| active-color | 激活状态颜色 | `String` | `#07c160` | - |
+| active-icon | 激活状态底部图标,可选值见 Icon 组件 | `String` | `checked` | 1.6.9 |
+| inactive-icon | 未激活状态底部图标,可选值见 Icon 组件 | `String` | - | 2.0.0 |
### Step Slot