feat(steps): add prop vertical-adaptive
This commit is contained in:
xuxiaoyan
parent
7bc21a59d7
commit
3fcb6131db
|
|
@ -21,10 +21,11 @@ Vue.component(Steps.name, Steps)
|
|||
#### Steps Props
|
||||
|Props | Description | Type | Default | Note|
|
||||
|----|-----|------|------|------|
|
||||
|steps | array of step information | Array<{name, text}> |-|-|
|
||||
|current | current step | Number | `0` |support for decimal point|
|
||||
|direction | to specify the direction of the step bar | String | `horizontal` | `horizontal`, `vertical` |
|
||||
|transition | progress change transition | Boolean | `false` |-|
|
||||
|steps|array of step information|Array<{name, text}>|-|-|
|
||||
|current|current step|Number|`0`|support for decimal point|
|
||||
|direction| to specify the direction of the step bar|String|`horizontal`|`horizontal`, `vertical`|
|
||||
|transition|progress change transition|Boolean|`false`|-|
|
||||
|vertical-adaptive|step height adaptive|Boolean|`false`|only for `vertical`, ** if set to `true` then adaptive according to container height, setting `.mfe-steps` height is necessary**|
|
||||
|
||||
#### Steps Slots
|
||||
|
||||
|
|
|
|||
|
|
@ -21,10 +21,11 @@ Vue.component(Steps.name, Steps)
|
|||
#### Steps Props
|
||||
| 属性 | 说明 | 类型 | 默认值 | 备注 |
|
||||
|----|-----|------|------|------|
|
||||
|steps | 步骤信息数组 | Array<{name, text}> |-|-|
|
||||
|current | 当前步骤/进度 | Number | `0` | 支持小数 |
|
||||
|direction | 展示方向 | String | `horizontal` | `horizontal`, `vertical` |
|
||||
|transition | 进度变化动效 | Boolean | `false` |-|
|
||||
|steps|步骤信息数组|Array<{name, text}>|-|-|
|
||||
|current|当前步骤/进度|Number|`0`| 支持小数 |
|
||||
|direction|展示方向|String|`horizontal`|`horizontal`, `vertical`|
|
||||
|transition|进度变化动效|Boolean|`false`|-|
|
||||
|vertical-adaptive|步骤高度自适应|Boolean|`false`|仅用于`vertical`, **如果设置为`true`则根据容器高度自适应，需设置`.mfe-steps`高度**|
|
||||
|
||||
|
||||
#### Steps Slots
|
||||
|
|
|
|||
|
|
@ -3,7 +3,9 @@
|
|||
<md-steps
|
||||
direction="vertical"
|
||||
:steps="steps"
|
||||
:current="1">
|
||||
:current="1"
|
||||
vertical-adaptive
|
||||
>
|
||||
</md-steps>
|
||||
</div>
|
||||
</template>
|
||||
|
|
@ -48,6 +50,5 @@ export default {
|
|||
|
||||
<style lang="stylus">
|
||||
.md-example-child-steps-7 .md-steps
|
||||
height 400px
|
||||
height 420px
|
||||
</style>
|
||||
|
||||
|
|
|
|||
|
|
@ -2,7 +2,7 @@
|
|||
<div class="md-example-child md-example-child-steps md-example-child-steps-8">
|
||||
<md-steps
|
||||
direction="vertical"
|
||||
:steps="steps"
|
||||
:steps="steps0"
|
||||
:current="0.5"
|
||||
>
|
||||
<template slot="reached">
|
||||
|
|
@ -25,6 +25,30 @@
|
|||
</template>
|
||||
</div>
|
||||
</md-steps>
|
||||
<md-steps
|
||||
direction="vertical"
|
||||
:steps="steps1"
|
||||
:current="1"
|
||||
>
|
||||
<template slot="current">
|
||||
<md-icon name="checked"></md-icon>
|
||||
</template>
|
||||
<div
|
||||
class="custom-content"
|
||||
slot="content"
|
||||
slot-scope="{ index, step }"
|
||||
>
|
||||
<template v-if="index === 1">
|
||||
<p class="name active" v-text="step.name"></p>
|
||||
<p class="amount">
|
||||
<md-amount :value="+step.amount"></md-amount>元
|
||||
</p>
|
||||
</template>
|
||||
<template v-else>
|
||||
<p class="name" v-text="step.name"></p>
|
||||
</template>
|
||||
</div>
|
||||
</md-steps>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
|
|
@ -33,9 +57,8 @@
|
|||
export default {
|
||||
name: 'steps-demo',
|
||||
/* DELETE */
|
||||
title: '使用插槽',
|
||||
titleEnUS: 'Using slots',
|
||||
height: 150,
|
||||
title: '自定义内容',
|
||||
titleEnUS: 'Custom content',
|
||||
/* DELETE */
|
||||
components: {
|
||||
[Steps.name]: Steps,
|
||||
|
|
@ -44,7 +67,7 @@ export default {
|
|||
},
|
||||
data() {
|
||||
return {
|
||||
steps: [
|
||||
steps0: [
|
||||
{
|
||||
name: '还款申请已提交',
|
||||
amount: '600.5',
|
||||
|
|
@ -54,6 +77,15 @@ export default {
|
|||
name: '还款成功',
|
||||
},
|
||||
],
|
||||
steps1: [
|
||||
{
|
||||
name: '还款申请已提交',
|
||||
},
|
||||
{
|
||||
name: '还款成功',
|
||||
amount: '600.5',
|
||||
},
|
||||
],
|
||||
}
|
||||
},
|
||||
}
|
||||
|
|
@ -61,8 +93,6 @@ export default {
|
|||
|
||||
<style lang="stylus">
|
||||
.md-example-child-steps-8
|
||||
.md-steps
|
||||
height 360px
|
||||
.custom-content
|
||||
.name
|
||||
font-size 28px
|
||||
|
|
|
|||
|
|
@ -3,7 +3,8 @@
|
|||
class="md-steps"
|
||||
:class="{
|
||||
'md-steps-vertical': direction == 'vertical',
|
||||
'md-steps-horizontal': direction == 'horizontal'
|
||||
'md-steps-horizontal': direction == 'horizontal',
|
||||
'vertical-adaptive': direction == 'vertical' && verticalAdaptive
|
||||
}"
|
||||
>
|
||||
<template v-for="(step, index) of steps">
|
||||
|
|
@ -49,8 +50,8 @@
|
|||
</div>
|
||||
</div>
|
||||
<div class="bar"
|
||||
v-if="index !== steps.length - 1"
|
||||
:class="[direction === 'horizontal' ? 'horizontal-bar' : 'vertical-bar']"
|
||||
:style="$_getStepSizeForStyle(index)"
|
||||
:key="`bar-${index}`"
|
||||
>
|
||||
<i
|
||||
|
|
@ -67,6 +68,7 @@
|
|||
</template>
|
||||
|
||||
<script>
import Icon from '../icon'
|
||||
import {toArray} from '../_util'
|
||||
|
||||
export default {
|
||||
name: 'md-steps',
|
||||
|
|
@ -97,12 +99,17 @@ export default {
|
|||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
verticalAdaptive: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
},
|
||||
|
||||
data() {
|
||||
return {
|
||||
initialed: false,
|
||||
progress: [],
|
||||
stepsSize: [],
|
||||
currentLength: 0,
|
||||
duration: 0.3,
|
||||
timer: null,
|
||||
|
|
@ -135,9 +142,48 @@ export default {
|
|||
this.currentLength = currentStep
|
||||
this.progress = this.$_sliceProgress(currentStep)
|
||||
},
|
||||
mounted() {
|
||||
this.$_initStepSize()
|
||||
},
|
||||
updated() {
|
||||
this.$nextTick(() => {
|
||||
this.$_initStepSize()
|
||||
})
|
||||
},
|
||||
|
||||
methods: {
|
||||
// MARK: private methods
|
||||
$_initStepSize() {
|
||||
if (this.direction !== 'vertical' || this.verticalAdaptive) {
|
||||
return
|
||||
}
|
||||
const iconWrappers = this.$el.querySelectorAll('.icon-wrapper')
|
||||
const textWrappers = this.$el.querySelectorAll('.text-wrapper')
|
||||
const stepsSize = toArray(textWrappers).map((wrapper, index) => {
|
||||
let stepHeight = wrapper.clientHeight
|
||||
const iconHeight = iconWrappers[index].clientHeight
|
||||
if (index === textWrappers.length - 1) {
|
||||
// The last step needs to subtract floated height
|
||||
stepHeight -= iconHeight
|
||||
} else {
|
||||
// Add spacing between steps to prevent distance too close
|
||||
stepHeight += 40
|
||||
}
|
||||
return stepHeight > 0 ? stepHeight : 0
|
||||
})
|
||||
|
||||
if (stepsSize.toString() !== this.stepsSize.toString()) {
|
||||
this.stepsSize = stepsSize
|
||||
}
|
||||
},
|
||||
$_getStepSizeForStyle(index) {
|
||||
const size = this.direction === 'vertical' && !this.verticalAdaptive ? this.stepsSize[index] : 0
|
||||
return size
|
||||
? {
|
||||
height: `${size}px`,
|
||||
}
|
||||
: null
|
||||
},
|
||||
$_formatValue(val) {
|
||||
if (val < 0) {
|
||||
return 0
|
||||
|
|
@ -215,8 +261,13 @@ export default {
|
|||
|
||||
&.md-steps-vertical
|
||||
align-items flex-start
|
||||
padding 40px 40px 80px
|
||||
padding 40px
|
||||
flex-direction column
|
||||
&.vertical-adaptive
|
||||
justify-content normal
|
||||
padding 40px 40px 8px
|
||||
.bar.vertical-bar
|
||||
flex 1
|
||||
.step-wrapper
|
||||
width 100%
|
||||
margin 4px 0
|
||||
|
|
@ -287,7 +338,6 @@ export default {
|
|||
|
||||
.bar
|
||||
position relative
|
||||
flex 1
|
||||
background-color steps-color
|
||||
overflow hidden
|
||||
.bar-inner
|
||||
|
|
@ -299,6 +349,7 @@ export default {
|
|||
content ''
|
||||
transition all linear 1s
|
||||
&.horizontal-bar
|
||||
flex 1
|
||||
height steps-border-size
|
||||
.bar-inner
|
||||
width 100%
|
||||
|
|
@ -312,4 +363,9 @@ export default {
|
|||
width steps-border-size
|
||||
height 100%
|
||||
background-color steps-color-active
|
||||
&:last-of-type
|
||||
&.horizontal-bar
|
||||
display none
|
||||
&.vertical-bar
|
||||
visibility hidden
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Reference in New Issue