root
/
mand-mobile
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

fix(steps): style compatibility issues

This commit is contained in:
supergaojian 2018-12-17 16:52:28 +08:00
parent f5fccb25d8
commit 5ea354a302
2 changed files with 124 additions and 63 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

37
components/steps/index.vue
View File

@ -28,7 +28,9 @@
v-else-if="index === currentLength"
name="success"
></md-icon>
<div v-else class="step-node-default"></div>
<div v-else class="step-node-default">
<div class="step-node-default-icon" style="width: 6px;height: 6px;border-radius: 50%;"></div>
</div>
</div>
<div class="text-wrapper">
<slot
@ -55,10 +57,7 @@
<i
class="bar-inner"
v-if="progress[index]"
:style="{
transform: `${progress[index]['translate']}(${(progress[index]['len'] - 1) * 100}%)`,
transition: `all ${progress[index]['time']}s linear`
}"
:style="$_barInnerStyle(index)"
></i>
</div>
</template>
@ -114,6 +113,22 @@ export default {
}
},
computed: {
$_barInnerStyle() {
return index => {
const {progress} = this
const transform =
this.direction === 'horizontal'
? `(${(progress[index]['len'] - 1) * 100}%, 0, 0)`
: `(0, ${(progress[index]['len'] - 1) * 100}%, 0)`
return {
transform: `translate3d${transform}`,
transition: `all ${progress[index]['time']}s linear`,
}
}
},
},
watch: {
current(val, oldVal) {
const currentStep = this.$_formatValue(val)
@ -221,7 +236,7 @@ export default {
}
time = (isNewProgress ? len : Math.abs(progress.len - len)) * this.duration
return {
translate: this.direction === 'horizontal' ? 'translateX' : 'translateY',
translate: this.direction === 'horizontal' ? 'translate3d' : 'translateY',
len,
time,
}
@ -283,7 +298,7 @@ export default {
&.no-current
.reached:last-of-type
display none !important
&.md-steps-vertical
align-items flex-start
padding 40px
@ -327,12 +342,8 @@ export default {
&:nth-child(2)
display none
.step-node-default:after
content ""
width 12px
height 12px
.step-node-default-icon
background steps-color
border-radius 12px
.step-wrapper
display flex
@ -358,7 +369,7 @@ export default {
line-height steps-text-font-size
font-size steps-desc-font-size
&.reached
.icon-wrapper .step-node-default:after
.icon-wrapper .step-node-default-icon
background steps-color-active
.bar

150
components/steps/test/__snapshots__/demo.spec.js.snap
View File

@ -5,7 +5,9 @@ exports[`Steps - Demo Add custom styles through by class named "current" 1`] = `
<div class="md-steps md-steps-horizontal">
<div class="step-wrapper reached">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">
@ -14,7 +16,7 @@ exports[`Steps - Demo Add custom styles through by class named "current" 1`] = `
<!---->
</div>
</div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translateX(0%);transition:all 0.3s linear;"></i></div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(0%, 0, 0);transition:all 0.3s linear;"></i></div>
<div class="step-wrapper current">
<div class="icon-wrapper"><i class="md-icon icon-font md-icon-success md" style="color:;"></i></div>
<div class="text-wrapper">
@ -24,10 +26,12 @@ exports[`Steps - Demo Add custom styles through by class named "current" 1`] = `
<!---->
</div>
</div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translateX(-100%);transition:all 0s linear;"></i></div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(-100%, 0, 0);transition:all 0s linear;"></i></div>
<div class="step-wrapper">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">
@ -36,10 +40,12 @@ exports[`Steps - Demo Add custom styles through by class named "current" 1`] = `
<!---->
</div>
</div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translateX(-100%);transition:all 0s linear;"></i></div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(-100%, 0, 0);transition:all 0s linear;"></i></div>
<div class="step-wrapper">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">
@ -67,10 +73,12 @@ exports[`Steps - Demo Basic 1`] = `
<!---->
</div>
</div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translateX(-100%);transition:all 0s linear;"></i></div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(-100%, 0, 0);transition:all 0s linear;"></i></div>
<div class="step-wrapper">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">
@ -79,10 +87,12 @@ exports[`Steps - Demo Basic 1`] = `
<!---->
</div>
</div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translateX(-100%);transition:all 0s linear;"></i></div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(-100%, 0, 0);transition:all 0s linear;"></i></div>
<div class="step-wrapper">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">
@ -103,7 +113,9 @@ exports[`Steps - Demo Complete all steps 1`] = `
<div class="md-steps md-steps-horizontal">
<div class="step-wrapper reached">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">
@ -112,10 +124,12 @@ exports[`Steps - Demo Complete all steps 1`] = `
<!---->
</div>
</div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translateX(0%);transition:all 0.3s linear;"></i></div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(0%, 0, 0);transition:all 0.3s linear;"></i></div>
<div class="step-wrapper reached">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">
@ -124,10 +138,12 @@ exports[`Steps - Demo Complete all steps 1`] = `
<!---->
</div>
</div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translateX(0%);transition:all 0.3s linear;"></i></div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(0%, 0, 0);transition:all 0.3s linear;"></i></div>
<div class="step-wrapper reached">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">
@ -136,7 +152,7 @@ exports[`Steps - Demo Complete all steps 1`] = `
<!---->
</div>
</div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translateX(0%);transition:all 0.3s linear;"></i></div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(0%, 0, 0);transition:all 0.3s linear;"></i></div>
<div class="step-wrapper current">
<div class="icon-wrapper"><i class="md-icon icon-font md-icon-success md" style="color:;"></i></div>
<div class="text-wrapper">
@ -167,10 +183,12 @@ exports[`Steps - Demo Custom content 1`] = `
</div>
</div>
</div>
<div class="bar vertical-bar"><i class="bar-inner" style="transform:translateY(-50%);transition:all 0.15s linear;"></i></div>
<div class="bar vertical-bar"><i class="bar-inner" style="transform:translate3d(0, -50%, 0);transition:all 0.15s linear;"></i></div>
<div class="step-wrapper">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="custom-content">
@ -185,7 +203,9 @@ exports[`Steps - Demo Custom content 1`] = `
<div class="md-steps md-steps-vertical">
<div class="step-wrapper reached">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="custom-content">
@ -193,7 +213,7 @@ exports[`Steps - Demo Custom content 1`] = `
</div>
</div>
</div>
<div class="bar vertical-bar"><i class="bar-inner" style="transform:translateY(0%);transition:all 0.3s linear;"></i></div>
<div class="bar vertical-bar"><i class="bar-inner" style="transform:translate3d(0, 0%, 0);transition:all 0.3s linear;"></i></div>
<div class="step-wrapper current">
<div class="icon-wrapper"><i class="md-icon icon-font md-icon-checked md" style="color:;"></i></div>
<div class="text-wrapper">
@ -225,7 +245,7 @@ exports[`Steps - Demo Custom step icon 1`] = `
<!---->
</div>
</div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translateX(0%);transition:all 0.3s linear;"></i></div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(0%, 0, 0);transition:all 0.3s linear;"></i></div>
<div class="step-wrapper reached">
<div class="icon-wrapper"><i class="md-icon icon-font md-icon-checked md" style="color:;"></i></div>
<div class="text-wrapper">
@ -235,7 +255,7 @@ exports[`Steps - Demo Custom step icon 1`] = `
<!---->
</div>
</div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translateX(0%);transition:all 0.3s linear;"></i></div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(0%, 0, 0);transition:all 0.3s linear;"></i></div>
<div class="step-wrapper current">
<div class="icon-wrapper"><i class="md-icon icon-font md-icon-location md" style="color:;"></i></div>
<div class="text-wrapper">
@ -245,10 +265,12 @@ exports[`Steps - Demo Custom step icon 1`] = `
<!---->
</div>
</div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translateX(-100%);transition:all 0s linear;"></i></div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(-100%, 0, 0);transition:all 0s linear;"></i></div>
<div class="step-wrapper">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">
@ -269,7 +291,9 @@ exports[`Steps - Demo Non-integer progress 1`] = `
<div class="md-steps md-steps-horizontal no-current">
<div class="step-wrapper reached">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">
@ -278,10 +302,12 @@ exports[`Steps - Demo Non-integer progress 1`] = `
<!---->
</div>
</div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translateX(0%);transition:all 0.3s linear;"></i></div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(0%, 0, 0);transition:all 0.3s linear;"></i></div>
<div class="step-wrapper reached current">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">
@ -290,10 +316,12 @@ exports[`Steps - Demo Non-integer progress 1`] = `
<!---->
</div>
</div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translateX(-80%);transition:all 0.059999999999999984s linear;"></i></div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(-80%, 0, 0);transition:all 0.059999999999999984s linear;"></i></div>
<div class="step-wrapper">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">
@ -302,10 +330,12 @@ exports[`Steps - Demo Non-integer progress 1`] = `
<!---->
</div>
</div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translateX(-100%);transition:all 0s linear;"></i></div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(-100%, 0, 0);transition:all 0s linear;"></i></div>
<div class="step-wrapper">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">
@ -326,7 +356,9 @@ exports[`Steps - Demo Specify the current step 1`] = `
<div class="md-steps md-steps-horizontal">
<div class="step-wrapper reached">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">
@ -335,10 +367,12 @@ exports[`Steps - Demo Specify the current step 1`] = `
<!---->
</div>
</div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translateX(0%);transition:all 0.3s linear;"></i></div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(0%, 0, 0);transition:all 0.3s linear;"></i></div>
<div class="step-wrapper reached">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">
@ -347,7 +381,7 @@ exports[`Steps - Demo Specify the current step 1`] = `
<!---->
</div>
</div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translateX(0%);transition:all 0.3s linear;"></i></div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(0%, 0, 0);transition:all 0.3s linear;"></i></div>
<div class="step-wrapper current">
<div class="icon-wrapper"><i class="md-icon icon-font md-icon-success md" style="color:;"></i></div>
<div class="text-wrapper">
@ -357,10 +391,12 @@ exports[`Steps - Demo Specify the current step 1`] = `
<!---->
</div>
</div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translateX(-100%);transition:all 0s linear;"></i></div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform:translate3d(-100%, 0, 0);transition:all 0s linear;"></i></div>
<div class="step-wrapper">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">
@ -381,7 +417,9 @@ exports[`Steps - Demo Transition of rogress changes 1`] = `
<div class="md-steps md-steps-horizontal no-current">
<div class="step-wrapper reached">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">
@ -390,10 +428,12 @@ exports[`Steps - Demo Transition of rogress changes 1`] = `
<!---->
</div>
</div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform: translateX(0%);"></i></div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform: translate3d(0%, 0, 0);"></i></div>
<div class="step-wrapper reached current">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">
@ -402,10 +442,12 @@ exports[`Steps - Demo Transition of rogress changes 1`] = `
<!---->
</div>
</div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform: translateX(-50%);"></i></div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform: translate3d(-50%, 0, 0);"></i></div>
<div class="step-wrapper">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">
@ -414,10 +456,12 @@ exports[`Steps - Demo Transition of rogress changes 1`] = `
<!---->
</div>
</div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform: translateX(-100%);"></i></div>
<div class="bar horizontal-bar"><i class="bar-inner" style="transform: translate3d(-100%, 0, 0);"></i></div>
<div class="step-wrapper">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width: 6px; height: 6px; border-radius: 50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">
@ -438,7 +482,9 @@ exports[`Steps - Demo Vertical display 1`] = `
<div class="md-steps md-steps-vertical vertical-adaptive">
<div class="step-wrapper reached">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">
@ -449,7 +495,7 @@ exports[`Steps - Demo Vertical display 1`] = `
</div>
</div>
</div>
<div class="bar vertical-bar"><i class="bar-inner" style="transform:translateY(0%);transition:all 0.3s linear;"></i></div>
<div class="bar vertical-bar"><i class="bar-inner" style="transform:translate3d(0, 0%, 0);transition:all 0.3s linear;"></i></div>
<div class="step-wrapper current">
<div class="icon-wrapper"><i class="md-icon icon-font md-icon-success md" style="color:;"></i></div>
<div class="text-wrapper">
@ -461,10 +507,12 @@ exports[`Steps - Demo Vertical display 1`] = `
</div>
</div>
</div>
<div class="bar vertical-bar"><i class="bar-inner" style="transform:translateY(-100%);transition:all 0s linear;"></i></div>
<div class="bar vertical-bar"><i class="bar-inner" style="transform:translate3d(0, -100%, 0);transition:all 0s linear;"></i></div>
<div class="step-wrapper">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">
@ -475,10 +523,12 @@ exports[`Steps - Demo Vertical display 1`] = `
</div>
</div>
</div>
<div class="bar vertical-bar"><i class="bar-inner" style="transform:translateY(-100%);transition:all 0s linear;"></i></div>
<div class="bar vertical-bar"><i class="bar-inner" style="transform:translate3d(0, -100%, 0);transition:all 0s linear;"></i></div>
<div class="step-wrapper">
<div class="icon-wrapper">
<div class="step-node-default"></div>
<div class="step-node-default">
<div class="step-node-default-icon" style="width:6px;height:6px;border-radius:50%;"></div>
</div>
</div>
<div class="text-wrapper">
<div class="name">