From 1a481f5c5591e29e16e78f90037cfb4f805e54e5 Mon Sep 17 00:00:00 2001 From: "cinwell.li" <cinwell.li@gmail.com> Date: Tue, 28 Mar 2017 15:09:22 +0800 Subject: [PATCH] Steps: add status prop, close #3722 (#3724) --- examples/docs/en-US/steps.md | 1 + examples/docs/zh-CN/steps.md | 1 + packages/steps/src/step.vue | 22 +++++++++++++--------- 3 files changed, 15 insertions(+), 9 deletions(-) diff --git a/examples/docs/en-US/steps.md b/examples/docs/en-US/steps.md index dfd494533..d5de169d6 100644 --- a/examples/docs/en-US/steps.md +++ b/examples/docs/en-US/steps.md @@ -128,6 +128,7 @@ Vertical step bars. | title | step title | string | — | — | | description | step description | string | — | — | | icon | step icon | icons provided by Element Icon. Can be overwritten by a named slot if you want to use custom icons | string | — | +| status | current status. It will be automatically set by Steps if not configured. | wait/process/finish/error/success | - | ### Step Slot | Name | Description | diff --git a/examples/docs/zh-CN/steps.md b/examples/docs/zh-CN/steps.md index 5eac5beb2..a8e9630c4 100644 --- a/examples/docs/zh-CN/steps.md +++ b/examples/docs/zh-CN/steps.md @@ -122,6 +122,7 @@ | title | 标题 | string | — | — | | description | 描述性文字 | string | — | — | | icon | 图标 | Element Icon 提供的图标,如果要使用自定义图标可以通过 slot 方式写入 | string | — | +| status | 设置当前步骤的状态,不设置则根据 steps 确定状态 | wait/process/finish/error/success | - | ### Step Slot | name | 说明 | diff --git a/packages/steps/src/step.vue b/packages/steps/src/step.vue index d633eecfa..2cfcb6e85 100644 --- a/packages/steps/src/step.vue +++ b/packages/steps/src/step.vue @@ -52,10 +52,7 @@ export default { title: String, icon: String, description: String, - status: { - type: String, - default: 'wait' - } + status: String }, data() { @@ -65,7 +62,7 @@ export default { lineStyle: {}, mainOffset: 0, isLast: false, - currentStatus: this.status + internalStatus: '' }; }, @@ -73,19 +70,25 @@ export default { this.$parent.steps.push(this); }, + computed: { + currentStatus() { + return this.status || this.internalStatus; + } + }, + methods: { updateStatus(val) { const prevChild = this.$parent.$children[this.index - 1]; if (val > this.index) { - this.currentStatus = this.$parent.finishStatus; + this.internalStatus = this.$parent.finishStatus; } else if (val === this.index) { - this.currentStatus = this.$parent.processStatus; + this.internalStatus = this.$parent.processStatus; } else { - this.currentStatus = 'wait'; + this.internalStatus = 'wait'; } - if (prevChild) prevChild.calcProgress(this.currentStatus); + if (prevChild) prevChild.calcProgress(this.internalStatus); }, calcProgress(status) { @@ -100,6 +103,7 @@ export default { style.transitionDelay = (-150 * this.index) + 'ms'; } + style.borderWidth = step ? '1px' : 0; this.$parent.direction === 'vertical' ? style.height = step + '%' : style.width = step + '%';