65 lines
1.5 KiB
Vue
65 lines
1.5 KiB
Vue
<template>
|
|
<div>
|
|
<div class="title">横向步骤条 正向</div>
|
|
<tiny-time-line :data="data3" type="timeline" :active="timeActive1" @click="timeClick1"></tiny-time-line>
|
|
<div class="half-div">
|
|
<div class="title">竖式步骤条 正向</div>
|
|
<tiny-time-line :data="data3" type="timeline" vertical :active="timeActive2" @click="timeClick2"></tiny-time-line>
|
|
</div>
|
|
<div class="half-div">
|
|
<div class="title">竖式步骤条 反向</div>
|
|
<tiny-time-line :data="data3" reverse type="timeline" vertical :active="timeActive3" @click="timeClick3"></tiny-time-line>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="jsx">
|
|
import { TimeLine, Modal } from '@opentiny/vue'
|
|
|
|
export default {
|
|
components: {
|
|
TinyTimeLine: TimeLine
|
|
},
|
|
data() {
|
|
return {
|
|
timeActive1: 0,
|
|
timeActive2: 0,
|
|
timeActive3: 0,
|
|
data3: [
|
|
{ name: '已下单', time: '2018-05-22 14:20' },
|
|
{ name: '运输中', time: '2018-05-22 14:20' },
|
|
{ name: '已签收', time: '2018-05-22 14:20' }
|
|
]
|
|
}
|
|
},
|
|
methods: {
|
|
timeClick1(index, node) {
|
|
this.timeActive1 = index
|
|
|
|
Modal.message(`节点index: ${index}; 节点信息: ${JSON.stringify(node)}.`)
|
|
},
|
|
timeClick2(index) {
|
|
this.timeActive2 = index
|
|
},
|
|
timeClick3(index) {
|
|
this.timeActive3 = index
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.half-div {
|
|
display: inline-block;
|
|
width: 49%;
|
|
margin-top: 60px;
|
|
margin-bottom: 50px;
|
|
padding-left: 50px;
|
|
}
|
|
|
|
.title {
|
|
font-weight: bold;
|
|
margin-bottom: 30px;
|
|
}
|
|
</style>
|