初衷,当前项目采用vux框架开发,开发过程中发现参照官方案例开发仍遇到不少的坑,然而百度上有关vux的案例也不多,所以想写一些自己踩过的坑分享给有需要的人。各路好汉来了就留个评论呗!
这是效果图
html部分:
<flow>
<template v-for="(i, index) in steps">
<flow-state :state="index + 1" :title="i.title" :is-done="i.isDone"></flow-state>
<flow-line v-if="index != (steps.length - 1)" :is-done="i.lineDone" :tip="i.tip ? i.tip : null"></flow-line>
</template>
</flow>
script:
<script>
import { Flow, FlowState, FlowLine } from 'vux'
export default {
components: {
Flow,
FlowState,
FlowLine
},
data () {
return {
steps: [{
title: '已付款',
isDone: true,
lineDone: true
},{
title: '待接单',
isDone: true,
lineDone: false
tip: '进行中'
},{
title: '待收货',
isDone: false,
lineDone: false
},{
title: '已完成',
isDone: false,
lineDone: false
}]
}
}
}
</script>