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