Skip to content

Commit ec1b35a

Browse files
张寸起7insummer
张寸起
authored and
7insummer
committed
feat:steps组件增加step-min-height属性
1 parent e2663e5 commit ec1b35a

File tree

15 files changed

+86
-76
lines changed

15 files changed

+86
-76
lines changed

‎dist/step/index.wxml‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<view class="step {{'step-'+direction}} l-class"
2-
style="{{direction=='row'?'width:'+(1/length)*750+'rpx':''}}">
2+
style="{{direction==='row'?'width:'+(1/length)*stepsWidth+'px':'min-height:'+stepMinHeight+'rpx'}}">
33
<view class="step-container l-step-class {{'step-container-'+direction}}">
44
<view wx:if="{{custom}}" class="step-custom">
55
<slot name="dot"/>
66
</view>
77
<view wx:else
88
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)}}">
9+
style="{{dot?currentStatus.dotStyle(activeIndex,index,color):currentStatus.statusStyle(activeIndex,index,color,status)}}">
1010
<l-icon wx:if="{{icon}}" name="{{icon}}" size="{{iconSize}}" color="{{(currentStatus.setStatus(activeIndex,index,status))==='process'?'#3963BC':iconColor}}"/>
1111
<block wx:if="{{!dot && !icon}}">
1212
<view wx:if="{{currentStatus.setStatus(activeIndex,index,status)==='error' || currentStatus.setStatus(activeIndex,index,status)==='finish'}}"
@@ -16,7 +16,7 @@
1616
</view>
1717
</view>
1818
<view class="step-content {{'step-content-'+direction}}">
19-
<view class="l-title-class {{'step-title-' + direction}} {{activeIndex===index?'step-title-process':'step-title'}}">
19+
<view class="l-title-class {{activeIndex===index?'step-title-process':'step-title'}}">
2020
{{title}}
2121
</view>
2222
<view class="l-describe-class step-describe">
@@ -41,9 +41,9 @@ var setStatus = function(activeIndex,index,status){
4141
}
4242
}
4343

44-
var statusStyle = function(activeIndex,index,color){
44+
var statusStyle = function(activeIndex,index,color,status){
4545
if(activeIndex===index){
46-
return ('background-color:' + color)
46+
return status==='error'?'':('background-color:' + color)
4747
} else if(activeIndex>index){
4848
return ('border-color:' + color + ';color:' + color)
4949
}else{

‎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;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"}
1+
.step{display:flex;position:relative}.step-custom{z-index:2}.step-row{flex-direction:column;align-items:center}.step-column{flex-direction:row;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;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:48rpx}.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;line-height:40rpx;margin:10rpx 0}.step-title-process{color:#333;font-size:28rpx;line-height:40rpx;margin:10rpx 0}.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: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ Component({
2727
value: 0
2828
},
2929
color: String,
30+
stepMinHeight: {
31+
type: String,
32+
value: '120'
33+
},
3034
status: {
3135
type: String,
3236
value: 'process'
@@ -52,19 +56,20 @@ Component({
5256
*/
5357
methods: {
5458
_initSteps() {
55-
let steps = this.getRelationNodes('../step/index');
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-
}
61-
steps.forEach((step, index) => {
62-
step.updateDataChange({
63-
index,
64-
...this.data
59+
const query = wx.createSelectorQuery().in(this);
60+
query.select('.steps-container').boundingClientRect().exec(res => {
61+
let steps = this.getRelationNodes('../step/index');
62+
this.data.length = steps.length;
63+
if (this.data.length > 0) {
64+
steps.forEach((step, index) => {
65+
step.updateDataChange({
66+
index,
67+
...this.data,
68+
stepsWidth: res[0].width
69+
});
6570
});
66-
});
67-
}
71+
}
72+
});
6873
}
6974
}
7075
});

‎dist/steps/index.wxml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<view class="l-class container {{'container-'+direction}}">
1+
<view class="l-class steps-container {{'steps-container-'+direction}}">
22
<slot />
33
</view>

‎dist/steps/index.wxss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
.container{display:flex}.container-row{flex-direction:row}.container-column{flex-direction:column}
1+
.steps-container{display:flex;width:100%}.steps-container-row{flex-direction:row}.steps-container-column{flex-direction:column}

‎examples/dist/step/index.wxml‎

Lines changed: 5 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,12 @@
11
<view class="step {{'step-'+direction}} l-class"
2-
style="{{direction=='row'?'width:'+(1/length)*750+'rpx':''}}">
2+
style="{{direction==='row'?'width:'+(1/length)*stepsWidth+'px':'min-height:'+stepMinHeight+'rpx'}}">
33
<view class="step-container l-step-class {{'step-container-'+direction}}">
44
<view wx:if="{{custom}}" class="step-custom">
55
<slot name="dot"/>
66
</view>
77
<view wx:else
88
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)}}">
9+
style="{{dot?currentStatus.dotStyle(activeIndex,index,color):currentStatus.statusStyle(activeIndex,index,color,status)}}">
1010
<l-icon wx:if="{{icon}}" name="{{icon}}" size="{{iconSize}}" color="{{(currentStatus.setStatus(activeIndex,index,status))==='process'?'#3963BC':iconColor}}"/>
1111
<block wx:if="{{!dot && !icon}}">
1212
<view wx:if="{{currentStatus.setStatus(activeIndex,index,status)==='error' || currentStatus.setStatus(activeIndex,index,status)==='finish'}}"
@@ -16,7 +16,7 @@
1616
</view>
1717
</view>
1818
<view class="step-content {{'step-content-'+direction}}">
19-
<view class="l-title-class {{'step-title-' + direction}} {{activeIndex===index?'step-title-process':'step-title'}}">
19+
<view class="l-title-class {{activeIndex===index?'step-title-process':'step-title'}}">
2020
{{title}}
2121
</view>
2222
<view class="l-describe-class step-describe">
@@ -41,9 +41,9 @@ var setStatus = function(activeIndex,index,status){
4141
}
4242
}
4343

44-
var statusStyle = function(activeIndex,index,color){
44+
var statusStyle = function(activeIndex,index,color,status){
4545
if(activeIndex===index){
46-
return ('background-color:' + color)
46+
return status==='error'?'':('background-color:' + color)
4747
} else if(activeIndex>index){
4848
return ('border-color:' + color + ';color:' + color)
4949
}else{

‎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;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"}
1+
.step{display:flex;position:relative}.step-custom{z-index:2}.step-row{flex-direction:column;align-items:center}.step-column{flex-direction:row;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;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:48rpx}.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;line-height:40rpx;margin:10rpx 0}.step-title-process{color:#333;font-size:28rpx;line-height:40rpx;margin:10rpx 0}.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: 17 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,10 @@ Component({
2727
value: 0
2828
},
2929
color: String,
30+
stepMinHeight: {
31+
type: String,
32+
value: '120'
33+
},
3034
status: {
3135
type: String,
3236
value: 'process'
@@ -52,19 +56,20 @@ Component({
5256
*/
5357
methods: {
5458
_initSteps() {
55-
let steps = this.getRelationNodes('../step/index');
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-
}
61-
steps.forEach((step, index) => {
62-
step.updateDataChange({
63-
index,
64-
...this.data
59+
const query = wx.createSelectorQuery().in(this);
60+
query.select('.steps-container').boundingClientRect().exec(res => {
61+
let steps = this.getRelationNodes('../step/index');
62+
this.data.length = steps.length;
63+
if (this.data.length > 0) {
64+
steps.forEach((step, index) => {
65+
step.updateDataChange({
66+
index,
67+
...this.data,
68+
stepsWidth: res[0].width
69+
});
6570
});
66-
});
67-
}
71+
}
72+
});
6873
}
6974
}
7075
});

‎examples/dist/steps/index.wxml‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,3 @@
1-
<view class="l-class container {{'container-'+direction}}">
1+
<view class="l-class steps-container {{'steps-container-'+direction}}">
22
<slot />
33
</view>

‎examples/dist/steps/index.wxss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1 +1 @@
1-
.container{display:flex}.container-row{flex-direction:row}.container-column{flex-direction:column}
1+
.steps-container{display:flex;width:100%}.steps-container-row{flex-direction:row}.steps-container-column{flex-direction:column}

0 commit comments

Comments
 (0)