效果图:
实现:页面
<template>
<div class="evnets">
<el-steps>
<el-step v-for="(item,index) in timeLineDataList" :key="index">
<template slot="icon">
<img :src="getImgUrl(item.color)" class="img">
</template>
<template slot="description">
<div> {{ item.time }}</div>
<div class="label"> {{ item.label }}</div>
<div v-if=" item.reason != null">{{ item.reason }}</div>
</template>
</el-step>
</el-steps>
</div>
</template>
script:
<script>
export default {
name: 'Steps',
props: {
timeLineDataList: {
type: Array,
require: true,
default: () => []
}
},
// 方法集合
methods: {
// 获取图片地址
getImgUrl(color) {
return require('@/assets/img/timeLine/timeLine' + color + '.png')
}
}
}
</script>
css:
<style lang='scss' scoped>
.evnets{
margin: calc(1.5vh) calc(2vh) calc(4vh) 0;
.img{
width: 25px;
height: 25px;
}
::v-deep .el-steps, .el-steps--horizontal,
.el-step__description is-wait, .label{
font-size: 13px;
color:#fff;
font-weight: 800;
}
}
</style>
父组件引用:
<template>
<div class="sub-container">
<time-line :time-line-data-list="timeLineDataList" />
</div>
</template>
script:
<script>
import TimeLine from './components/Steps.vue'
export default {
name: '',
components: { TimeLine },
data() {
// 这里存放数据
return {
tite: '设备大事记',
// 时间轴展示数据
timeLineDataList: [
{ time: '2021-01-01', color: 'A', label: '设备加入' },
{ time: '2021-05-01', color: 'B', label: '设备首次运行' },
{ time: '2021-06-01', color: 'D', label: '严重故障', reason: '停机检修' },
{ time: '2021-07-01', color: 'A', label: '设备恢复运行' }
]
}
}
}
</script>