mirror of https://github.com/ElemeFE/element
74 lines
1.4 KiB
Vue
74 lines
1.4 KiB
Vue
<template>
|
|
<li class="el-timeline-item">
|
|
<div class="el-timeline-item__tail"></div>
|
|
|
|
<div v-if="!$slots.dot"
|
|
class="el-timeline-item__node"
|
|
:class="[
|
|
`el-timeline-item__node--${size || ''}`,
|
|
`el-timeline-item__node--${type || ''}`
|
|
]"
|
|
:style="{
|
|
backgroundColor: color
|
|
}"
|
|
>
|
|
<i v-if="icon"
|
|
class="el-timeline-item__icon"
|
|
:class="icon"
|
|
></i>
|
|
</div>
|
|
<div v-if="$slots.dot" class="el-timeline-item__dot">
|
|
<slot name="dot"></slot>
|
|
</div>
|
|
|
|
<div class="el-timeline-item__wrapper">
|
|
<div v-if="!hideTimestamp && placement === 'top'"
|
|
class="el-timeline-item__timestamp is-top">
|
|
{{timestamp}}
|
|
</div>
|
|
|
|
<div class="el-timeline-item__content">
|
|
<slot></slot>
|
|
</div>
|
|
|
|
<div v-if="!hideTimestamp && placement === 'bottom'"
|
|
class="el-timeline-item__timestamp is-bottom">
|
|
{{timestamp}}
|
|
</div>
|
|
</div>
|
|
</li>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'ElTimelineItem',
|
|
|
|
inject: ['timeline'],
|
|
|
|
props: {
|
|
timestamp: String,
|
|
|
|
hideTimestamp: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
|
|
placement: {
|
|
type: String,
|
|
default: 'bottom'
|
|
},
|
|
|
|
type: String,
|
|
|
|
color: String,
|
|
|
|
size: {
|
|
type: String,
|
|
default: 'normal'
|
|
},
|
|
|
|
icon: String
|
|
}
|
|
};
|
|
</script>
|