Skip to content

Commit 5748030

Browse files
张寸起7insummer
张寸起
authored and
7insummer
committed
refactor:重构steps组件
1 parent 0d78e38 commit 5748030

File tree

15 files changed

+433
-212
lines changed

15 files changed

+433
-212
lines changed

‎dist/step/index.js‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,27 @@ Component({
55
externalClasses: [
66
'l-class',
77
'l-step-class',
8-
'l-title-class',
8+
'l-title-class',
99
'l-describe-class',
1010
'l-line-class'
1111
],
12+
options: {
13+
multipleSlots: true // 在组件定义时的选项中启用多slot支持
14+
},
1215
relations: {
1316
'../steps/index': {
1417
type: 'parent'
1518
},
1619
},
1720
properties: {
1821
icon: String,
19-
status: String,
2022
title: String,
2123
describe: String,
2224
iconSize: {
2325
type: Number,
2426
value: 24
2527
},
26-
iconColor: {
27-
type: String,
28-
value: '#fff'
29-
},
28+
iconColor: String,
3029
custom: Boolean
3130
},
3231

‎dist/step/index.wxml‎

Lines changed: 52 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,67 @@
11
<view class="step {{'step-'+direction}} l-class"
22
style="{{direction=='row'?'width:'+(1/length)*750+'rpx':''}}">
3-
<view class="step-icon">
3+
<view class="step-container l-step-class {{'step-container-'+direction}}">
44
<view wx:if="{{custom}}" class="step-custom">
5-
<slot/>
5+
<slot name="dot"/>
66
</view>
77
<view wx:else
8-
class="l-step-class step-icon {{icon?'step-number':'step-'+type}} {{status?'step-number-'+status:''}} {{activeIndex==index+1 && !status?'step-'+type+'-on':''}} {{activeIndex>index+1 && !status?'step-'+type+'-over':''}}">
9-
<l-icon wx:if="{{icon || status}}"
10-
name="{{icon || status}}"
11-
size="{{iconSize}}"
12-
color="{{iconColor}}"/>
13-
<block wx:if="{{type=='number' && !icon &&!status}}">{{index+1}}</block>
8+
class="l-step-class {{dot && !icon?'step-dot-'+currentStatus.setStatus(activeIndex,index,status)+' step-dot':'step-'+currentStatus.setStatus(activeIndex,index,status)+' step-icon'}}"
9+
style="{{dot?currentStatus.dotStyle(activeIndex,index,color):currentStatus.statusStyle(activeIndex,index,color)}}">
10+
<l-icon wx:if="{{icon}}" name="{{icon}}" size="{{iconSize}}" color="{{(currentStatus.setStatus(activeIndex,index,status))==='process'?'#3963BC':iconColor}}"/>
11+
<block wx:if="{{!dot && !icon}}">
12+
<view wx:if="{{currentStatus.setStatus(activeIndex,index,status)==='error' || currentStatus.setStatus(activeIndex,index,status)==='finish'}}"
13+
class="iconfont icon-{{currentStatus.setStatus(activeIndex,index,status)}}"></view>
14+
<block wx:else>{{index+1}}</block>
15+
</block>
1416
</view>
1517
</view>
1618
<view class="step-content {{'step-content-'+direction}}">
17-
<view class="l-title-class step-title {{'step-title-' + direction}} {{status?'step-title-' + status:''}} {{activeIndex==index+1?'step-title-on':''}}">
19+
<view class="l-title-class {{'step-title-' + direction}} {{activeIndex===index?'step-title-process':'step-title'}}">
1820
{{title}}
1921
</view>
20-
<view class="l-describe-class step-describe {{activeIndex==index+1?'step-describe-on':''}}">
22+
<view class="l-describe-class step-describe">
2123
{{describe}}
24+
<slot name="describe"/>
2225
</view>
2326
</view>
24-
<view class="step-line {{'step-line-'+ direction}} {{'step-line-'+ direction + '-number'}} {{'step-line-'+type}} {{status?'step-line-'+ status:''}} {{activeIndex>index?'step-line-on':''}}"
27+
<view class="step-line l-line-class {{'step-line-'+ direction}} {{activeIndex>index?'step-line-finish':'step-line-wait'}}"
28+
style="{{activeIndex>index?('background-color:'+color):''}}"
2529
wx:if="{{length !== index+1}}">
2630
</view>
27-
</view>
31+
</view>
32+
33+
<wxs module="currentStatus">
34+
var setStatus = function(activeIndex,index,status){
35+
if(activeIndex===index){
36+
return status || 'process'
37+
} else if(activeIndex>index){
38+
return 'finish'
39+
}else{
40+
return 'wait'
41+
}
42+
}
43+
44+
var statusStyle = function(activeIndex,index,color){
45+
if(activeIndex===index){
46+
return ('background-color:' + color)
47+
} else if(activeIndex>index){
48+
return ('border-color:' + color + ';color:' + color)
49+
}else{
50+
return ''
51+
}
52+
}
53+
54+
var dotStyle = function(activeIndex,index,color){
55+
if(activeIndex>=index){
56+
return ('background-color:' + color)
57+
} else{
58+
return ''
59+
}
60+
}
61+
62+
module.exports = {
63+
setStatus:setStatus,
64+
statusStyle:statusStyle,
65+
dotStyle:dotStyle
66+
}
67+
</wxs>

‎dist/step/index.wxss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
.step{display:flex;position:relative}.step-custom{z-index:2}.step-row{flex-direction:column;align-items:center}.step-column{flex-direction:row;height:160rpx;padding-left:30rpx;box-sizing:border-box}.step-icon{width:40rpx;height:40rpx;display:flex;align-items:center;justify-content:center}.step-number{width:40rpx;height:40rpx;border-radius:50%;background-color:#c4c9d2;display:flex;align-items:center;justify-content:center;line-height:40rpx;font-size:28rpx;transition:.5s;color:#fff;z-index:2}.step-number-mistake{background-color:#f4516c}.step-number-finish{background-color:#34bfa3}.step-number-on{color:#fff;background-color:#3963bc}.step-number-over{color:#fff;background-color:#3963bc}.step-dot{width:24rpx;height:24rpx;border-radius:50%;background:#c4c9d2;transition:.5s}.step-dot-on{background-color:#3963bc}.step-dot-over{background-color:#3963bc}.step-line{background:#c4c9d2;transition:.5s;position:absolute;z-index:0}.step-line-row{height:4rpx;width:100%;left:50%}.step-line-row-number{top:20rpx}.step-line-column{width:4rpx;height:100%;top:20rpx}.step-line-column-number{left:46rpx}.step-line-on{background-color:#3963bc}.step-line-mistake{background-color:#f4516c}.step-line-finish{background-color:#34bfa3}.step-content{display:flex;flex-direction:column}.step-content-row{align-items:center;width:100%}.step-content-column{margin-left:15rpx}.step-title{color:#333;font-size:32rpx}.step-title-row{margin-top:15rpx}.step-title-on{color:#3963bc}.step-title-finish{color:#34bfa3}.step-title-mistake{color:#f4516c}.step-describe{color:#8c98ae;font-size:28rpx}
1+
.step{display:flex;position:relative}.step-custom{z-index:2}.step-row{flex-direction:column;align-items:center}.step-column{flex-direction:row;min-height:120rpx;padding-left:30rpx;box-sizing:border-box}.step-container{display:flex;justify-content:center;z-index:2;align-items:center;background-color:#fff}.step-container-row{width:70rpx;height:40rpx}.step-container-column{height:60rpx;width:40rpx}.step-icon{width:40rpx;height:40rpx;display:flex;align-items:center;justify-content:center;line-height:40rpx;font-size:22rpx;transition:.5s;box-sizing:border-box}.step-process{color:#fff;background-color:#3963bc;border-radius:50%}.step-error{background-color:#fff;border:1px solid #f4516c;color:#f4516c;border-radius:50%}.step-finish{background-color:#fff;color:#3963bc;border:1px solid #3963bc;border-radius:50%}.step-wait{background-color:#fff;color:#c4c9d2;border:1px solid #c4c9d2;border-radius:50%}.step-dot{width:24rpx;height:24rpx;border-radius:50%;transition:.5s}.step-dot-process{background-color:#3963bc}.step-dot-wait{background-color:#c4c9d2}.step-dot-error{background-color:#f4516c}.step-dot-finish{background-color:#3963bc}.step-line{background:#c4c9d2;transition:.5s;position:absolute;z-index:0}.step-line-row{height:2rpx;width:100%;left:50%;top:18rpx}.step-line-column{width:2rpx;height:100%;top:20rpx;left:47rpx}.step-line-wait{background-color:#e8e8e8}.step-line-finish{background-color:#3963bc}.step-content{display:flex;flex-direction:column}.step-content-row{align-items:center;width:100%}.step-content-column{margin-left:15rpx}.step-title{color:#595959;font-size:26rpx}.step-title-row{margin-top:15rpx}.step-title-column{margin-top:15rpx}.step-title-process{color:#333;font-size:28rpx}.step-describe{color:#8c98ae;font-size:22rpx}@font-face{font-family:iconfont;src:url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAK8AAsAAAAABpQAAAJvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgp8gQsBNgIkAwwLCAAEIAWEbQc2G9EFyK4wbuGJaCgrSmkBCSe/ZeUtviBzEXztx/bd3f+oNEiuzaerJhKN6WQSJFqlZELxTOZqTS9l0hsflgVC/bD3z/dzv8lMXAksyeryeByfVkhgV93EvwdIwC+b/hetH5jPyAA+z+X0JtCBXONbltMcw496AcYBBbYnRoEEXEQBcAqyOwK15PsEmg2KiewMTy6yCoWzLBD3lqGwilJKUaRqo1C37C3iRaUxPaUnPMffj18LUUFSZc7a3bshnfV++DD/2GVISBPo4QoZU5hCXLeWThULiSvWbCrpb64VIS2VhYlVpqU+6B8vETWnsxWM0XLiI19G8OGABDKoy5VBzDRje98gRHertt+2fLx2cdC6ZJwcnK226Ifh0uzy4vzK8sLSytxprqHAHexGbz8/6za6C3ePjwW29viP3ailnm7Zz+SntAd5IV0IBHuvvy3Xd/41thTw/osdBRahcefh4Gepwb5iah13LrrKV9mRrBsIJKhCjvrnxLq9Trf0wb2ERn0TIg0GcmSNhsjCTqHSYgm1RutoNmnkcIseUrEoTZiwRRA63SBp94as0zNZ2BdU+v2h1hnFaHYczWe2GAmrakCiQqiDmgdLEz73vFSVdM+jkXUVWdTG/DLK0MpCOpGqVkfQR7nEhjBnZIg4cCk8GCaPoesKCKSwUaOESRS0J5O87UUJTXisyjYJKQjSAVUesGgEHw+Hk6ra5+chQ5ZLIXsEDfllSApZ44O0hBRAjph8SPAoz4RyDBmEcICTBA8YJrOQyyWAoH2WDWlIgjmhEGiXdAdx1JTY3uL93xFo5kzMkSJHUT+g+5BNxVpWMAYAAA==') format('woff2')}.iconfont{font-family:iconfont!important;font-size:24rpx;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-finish:before{content:"\e600"}.icon-error:before{content:"\e6cf"}

‎dist/steps/index.js‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -24,19 +24,19 @@ Component({
2424
},
2525
activeIndex: {
2626
type: Number,
27-
value: 1
27+
value: 0
2828
},
29-
activeColor: {
29+
color: String,
30+
status: {
3031
type: String,
31-
value: '#3963bc'
32+
value: 'process'
3233
},
33-
color: {
34-
type: String,
35-
value: ''
36-
},
37-
type: {
38-
type: String,
39-
value: 'number'
34+
dot: Boolean
35+
},
36+
37+
observers: {
38+
'activeIndex': function () {
39+
this._initSteps();
4040
}
4141
},
4242

@@ -53,14 +53,13 @@ Component({
5353
methods: {
5454
_initSteps() {
5555
let steps = this.getRelationNodes('../step/index');
56-
let length = steps.length;
57-
if (this.data.direction == 'row') this.setData({
58-
length
59-
});
60-
if (length > 0) {
56+
this.data.length = steps.length;
57+
if (this.data.length > 0) {
58+
if (this.data.activeIndex > this.data.length || this.data.activeIndex < 0) {
59+
console.error(`active-index值:${this.data.activeIndex}不在合理范围内`);
60+
}
6161
steps.forEach((step, index) => {
6262
step.updateDataChange({
63-
length,
6463
index,
6564
...this.data
6665
});

‎examples/dist/step/index.js‎

Lines changed: 5 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -5,28 +5,27 @@ Component({
55
externalClasses: [
66
'l-class',
77
'l-step-class',
8-
'l-title-class',
8+
'l-title-class',
99
'l-describe-class',
1010
'l-line-class'
1111
],
12+
options: {
13+
multipleSlots: true // 在组件定义时的选项中启用多slot支持
14+
},
1215
relations: {
1316
'../steps/index': {
1417
type: 'parent'
1518
},
1619
},
1720
properties: {
1821
icon: String,
19-
status: String,
2022
title: String,
2123
describe: String,
2224
iconSize: {
2325
type: Number,
2426
value: 24
2527
},
26-
iconColor: {
27-
type: String,
28-
value: '#fff'
29-
},
28+
iconColor: String,
3029
custom: Boolean
3130
},
3231

‎examples/dist/step/index.wxml‎

Lines changed: 52 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,67 @@
11
<view class="step {{'step-'+direction}} l-class"
22
style="{{direction=='row'?'width:'+(1/length)*750+'rpx':''}}">
3-
<view class="step-icon">
3+
<view class="step-container l-step-class {{'step-container-'+direction}}">
44
<view wx:if="{{custom}}" class="step-custom">
5-
<slot/>
5+
<slot name="dot"/>
66
</view>
77
<view wx:else
8-
class="l-step-class step-icon {{icon?'step-number':'step-'+type}} {{status?'step-number-'+status:''}} {{activeIndex==index+1 && !status?'step-'+type+'-on':''}} {{activeIndex>index+1 && !status?'step-'+type+'-over':''}}">
9-
<l-icon wx:if="{{icon || status}}"
10-
name="{{icon || status}}"
11-
size="{{iconSize}}"
12-
color="{{iconColor}}"/>
13-
<block wx:if="{{type=='number' && !icon &&!status}}">{{index+1}}</block>
8+
class="l-step-class {{dot && !icon?'step-dot-'+currentStatus.setStatus(activeIndex,index,status)+' step-dot':'step-'+currentStatus.setStatus(activeIndex,index,status)+' step-icon'}}"
9+
style="{{dot?currentStatus.dotStyle(activeIndex,index,color):currentStatus.statusStyle(activeIndex,index,color)}}">
10+
<l-icon wx:if="{{icon}}" name="{{icon}}" size="{{iconSize}}" color="{{(currentStatus.setStatus(activeIndex,index,status))==='process'?'#3963BC':iconColor}}"/>
11+
<block wx:if="{{!dot && !icon}}">
12+
<view wx:if="{{currentStatus.setStatus(activeIndex,index,status)==='error' || currentStatus.setStatus(activeIndex,index,status)==='finish'}}"
13+
class="iconfont icon-{{currentStatus.setStatus(activeIndex,index,status)}}"></view>
14+
<block wx:else>{{index+1}}</block>
15+
</block>
1416
</view>
1517
</view>
1618
<view class="step-content {{'step-content-'+direction}}">
17-
<view class="l-title-class step-title {{'step-title-' + direction}} {{status?'step-title-' + status:''}} {{activeIndex==index+1?'step-title-on':''}}">
19+
<view class="l-title-class {{'step-title-' + direction}} {{activeIndex===index?'step-title-process':'step-title'}}">
1820
{{title}}
1921
</view>
20-
<view class="l-describe-class step-describe {{activeIndex==index+1?'step-describe-on':''}}">
22+
<view class="l-describe-class step-describe">
2123
{{describe}}
24+
<slot name="describe"/>
2225
</view>
2326
</view>
24-
<view class="step-line {{'step-line-'+ direction}} {{'step-line-'+ direction + '-number'}} {{'step-line-'+type}} {{status?'step-line-'+ status:''}} {{activeIndex>index?'step-line-on':''}}"
27+
<view class="step-line l-line-class {{'step-line-'+ direction}} {{activeIndex>index?'step-line-finish':'step-line-wait'}}"
28+
style="{{activeIndex>index?('background-color:'+color):''}}"
2529
wx:if="{{length !== index+1}}">
2630
</view>
27-
</view>
31+
</view>
32+
33+
<wxs module="currentStatus">
34+
var setStatus = function(activeIndex,index,status){
35+
if(activeIndex===index){
36+
return status || 'process'
37+
} else if(activeIndex>index){
38+
return 'finish'
39+
}else{
40+
return 'wait'
41+
}
42+
}
43+
44+
var statusStyle = function(activeIndex,index,color){
45+
if(activeIndex===index){
46+
return ('background-color:' + color)
47+
} else if(activeIndex>index){
48+
return ('border-color:' + color + ';color:' + color)
49+
}else{
50+
return ''
51+
}
52+
}
53+
54+
var dotStyle = function(activeIndex,index,color){
55+
if(activeIndex>=index){
56+
return ('background-color:' + color)
57+
} else{
58+
return ''
59+
}
60+
}
61+
62+
module.exports = {
63+
setStatus:setStatus,
64+
statusStyle:statusStyle,
65+
dotStyle:dotStyle
66+
}
67+
</wxs>

‎examples/dist/step/index.wxss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
.step{display:flex;position:relative}.step-custom{z-index:2}.step-row{flex-direction:column;align-items:center}.step-column{flex-direction:row;height:160rpx;padding-left:30rpx;box-sizing:border-box}.step-icon{width:40rpx;height:40rpx;display:flex;align-items:center;justify-content:center}.step-number{width:40rpx;height:40rpx;border-radius:50%;background-color:#c4c9d2;display:flex;align-items:center;justify-content:center;line-height:40rpx;font-size:28rpx;transition:.5s;color:#fff;z-index:2}.step-number-mistake{background-color:#f4516c}.step-number-finish{background-color:#34bfa3}.step-number-on{color:#fff;background-color:#3963bc}.step-number-over{color:#fff;background-color:#3963bc}.step-dot{width:24rpx;height:24rpx;border-radius:50%;background:#c4c9d2;transition:.5s}.step-dot-on{background-color:#3963bc}.step-dot-over{background-color:#3963bc}.step-line{background:#c4c9d2;transition:.5s;position:absolute;z-index:0}.step-line-row{height:4rpx;width:100%;left:50%}.step-line-row-number{top:20rpx}.step-line-column{width:4rpx;height:100%;top:20rpx}.step-line-column-number{left:46rpx}.step-line-on{background-color:#3963bc}.step-line-mistake{background-color:#f4516c}.step-line-finish{background-color:#34bfa3}.step-content{display:flex;flex-direction:column}.step-content-row{align-items:center;width:100%}.step-content-column{margin-left:15rpx}.step-title{color:#333;font-size:32rpx}.step-title-row{margin-top:15rpx}.step-title-on{color:#3963bc}.step-title-finish{color:#34bfa3}.step-title-mistake{color:#f4516c}.step-describe{color:#8c98ae;font-size:28rpx}
1+
.step{display:flex;position:relative}.step-custom{z-index:2}.step-row{flex-direction:column;align-items:center}.step-column{flex-direction:row;min-height:120rpx;padding-left:30rpx;box-sizing:border-box}.step-container{display:flex;justify-content:center;z-index:2;align-items:center;background-color:#fff}.step-container-row{width:70rpx;height:40rpx}.step-container-column{height:60rpx;width:40rpx}.step-icon{width:40rpx;height:40rpx;display:flex;align-items:center;justify-content:center;line-height:40rpx;font-size:22rpx;transition:.5s;box-sizing:border-box}.step-process{color:#fff;background-color:#3963bc;border-radius:50%}.step-error{background-color:#fff;border:1px solid #f4516c;color:#f4516c;border-radius:50%}.step-finish{background-color:#fff;color:#3963bc;border:1px solid #3963bc;border-radius:50%}.step-wait{background-color:#fff;color:#c4c9d2;border:1px solid #c4c9d2;border-radius:50%}.step-dot{width:24rpx;height:24rpx;border-radius:50%;transition:.5s}.step-dot-process{background-color:#3963bc}.step-dot-wait{background-color:#c4c9d2}.step-dot-error{background-color:#f4516c}.step-dot-finish{background-color:#3963bc}.step-line{background:#c4c9d2;transition:.5s;position:absolute;z-index:0}.step-line-row{height:2rpx;width:100%;left:50%;top:18rpx}.step-line-column{width:2rpx;height:100%;top:20rpx;left:47rpx}.step-line-wait{background-color:#e8e8e8}.step-line-finish{background-color:#3963bc}.step-content{display:flex;flex-direction:column}.step-content-row{align-items:center;width:100%}.step-content-column{margin-left:15rpx}.step-title{color:#595959;font-size:26rpx}.step-title-row{margin-top:15rpx}.step-title-column{margin-top:15rpx}.step-title-process{color:#333;font-size:28rpx}.step-describe{color:#8c98ae;font-size:22rpx}@font-face{font-family:iconfont;src:url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAK8AAsAAAAABpQAAAJvAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDBgp8gQsBNgIkAwwLCAAEIAWEbQc2G9EFyK4wbuGJaCgrSmkBCSe/ZeUtviBzEXztx/bd3f+oNEiuzaerJhKN6WQSJFqlZELxTOZqTS9l0hsflgVC/bD3z/dzv8lMXAksyeryeByfVkhgV93EvwdIwC+b/hetH5jPyAA+z+X0JtCBXONbltMcw496AcYBBbYnRoEEXEQBcAqyOwK15PsEmg2KiewMTy6yCoWzLBD3lqGwilJKUaRqo1C37C3iRaUxPaUnPMffj18LUUFSZc7a3bshnfV++DD/2GVISBPo4QoZU5hCXLeWThULiSvWbCrpb64VIS2VhYlVpqU+6B8vETWnsxWM0XLiI19G8OGABDKoy5VBzDRje98gRHertt+2fLx2cdC6ZJwcnK226Ifh0uzy4vzK8sLSytxprqHAHexGbz8/6za6C3ePjwW29viP3ailnm7Zz+SntAd5IV0IBHuvvy3Xd/41thTw/osdBRahcefh4Gepwb5iah13LrrKV9mRrBsIJKhCjvrnxLq9Trf0wb2ERn0TIg0GcmSNhsjCTqHSYgm1RutoNmnkcIseUrEoTZiwRRA63SBp94as0zNZ2BdU+v2h1hnFaHYczWe2GAmrakCiQqiDmgdLEz73vFSVdM+jkXUVWdTG/DLK0MpCOpGqVkfQR7nEhjBnZIg4cCk8GCaPoesKCKSwUaOESRS0J5O87UUJTXisyjYJKQjSAVUesGgEHw+Hk6ra5+chQ5ZLIXsEDfllSApZ44O0hBRAjph8SPAoz4RyDBmEcICTBA8YJrOQyyWAoH2WDWlIgjmhEGiXdAdx1JTY3uL93xFo5kzMkSJHUT+g+5BNxVpWMAYAAA==') format('woff2')}.iconfont{font-family:iconfont!important;font-size:24rpx;font-style:normal;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}.icon-finish:before{content:"\e600"}.icon-error:before{content:"\e6cf"}

‎examples/dist/steps/index.js‎

Lines changed: 15 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -24,19 +24,19 @@ Component({
2424
},
2525
activeIndex: {
2626
type: Number,
27-
value: 1
27+
value: 0
2828
},
29-
activeColor: {
29+
color: String,
30+
status: {
3031
type: String,
31-
value: '#3963bc'
32+
value: 'process'
3233
},
33-
color: {
34-
type: String,
35-
value: ''
36-
},
37-
type: {
38-
type: String,
39-
value: 'number'
34+
dot: Boolean
35+
},
36+
37+
observers: {
38+
'activeIndex': function () {
39+
this._initSteps();
4040
}
4141
},
4242

@@ -53,14 +53,13 @@ Component({
5353
methods: {
5454
_initSteps() {
5555
let steps = this.getRelationNodes('../step/index');
56-
let length = steps.length;
57-
if (this.data.direction == 'row') this.setData({
58-
length
59-
});
60-
if (length > 0) {
56+
this.data.length = steps.length;
57+
if (this.data.length > 0) {
58+
if (this.data.activeIndex > this.data.length || this.data.activeIndex < 0) {
59+
console.error(`active-index值:${this.data.activeIndex}不在合理范围内`);
60+
}
6161
steps.forEach((step, index) => {
6262
step.updateDataChange({
63-
length,
6463
index,
6564
...this.data
6665
});

0 commit comments

Comments
 (0)