效果图
组件封装代码
<template>
<div id="time-line">
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:icon="activity.icon"
:type="activity.type || 'primary'"
:color="activity.color || '#409EFF'"
:size="activity.size || 'large'"
:timestamp="activity.timestamp">
<div v-if="typeof activity.content === 'object'">
<div v-for="(value, i) in activity.content" :key="i" v-html="value"></div>
</div>
<div v-else>
<div v-html="activity.content"></div>
</div>
</el-timeline-item>
</el-timeline>
</div>
</template>
<script>
export default {
name: "CustomTimeline",
props: {
mapper: Object,
activities: Array
}
}
</script>
<style lang="scss" type="text/scss">
#time-line {
.el-timeline {
margin-left: 150px;
.el-timeline-item {
.el-timeline-item__wrapper {
.el-timeline-item__timestamp {
margin-top: 8px;
position: absolute !important;
left: -150px;
top: -5px;
font-size: 14px !important;
}
.el-timeline-item__content {
color: #909399;
}
}
}
}
}
</style>
引用
<template>
<div>
<Timeline :mapper="mapper" :activities="activities"/>
</div>
</template>
<script>
import Timeline from '@/components/Timeline/index';
export default {
name: 'ConsumerDetail',
components: {VxeDialog, Timeline},
data() {
return {
mapper: {
user: '用户',
descInfo: '描述',
state: '状态'
},
activities: [{
content: {
user: 'admin',
descInfo: '支持使用图标',
state: '草稿',
},
timestamp: '2018-04-12 20:46',
}, {
content: '<div>admin <span style="color: #000000">申请发布</span></div><div>拒绝发布</div>',
timestamp: '2018-04-03 20:46'
}, {
content: '<div>admin <span style="color: #000000">审核未通过</span></div><div>拒绝发布</div>',
timestamp: '2018-04-03 20:46'
}]
}
}
</script>