mirror of
https://github.com/element-plus/element-plus.git
synced 2026-03-13 07:51:17 +08:00
0be1872b06
* docs: [timeline] fix type error * Update docs/examples/timeline/custom-node.vue Co-authored-by: sea <45450994+warmthsea@users.noreply.github.com> * Update docs/examples/timeline/custom-node.vue Co-authored-by: sea <45450994+warmthsea@users.noreply.github.com> --------- Co-authored-by: sea <45450994+warmthsea@users.noreply.github.com>
56 lines
1.2 KiB
Vue
56 lines
1.2 KiB
Vue
<template>
|
|
<el-timeline style="max-width: 600px">
|
|
<el-timeline-item
|
|
v-for="(activity, index) in activities"
|
|
:key="index"
|
|
:icon="activity.icon"
|
|
:type="activity.type"
|
|
:color="activity.color"
|
|
:size="activity.size"
|
|
:hollow="activity.hollow"
|
|
:timestamp="activity.timestamp"
|
|
>
|
|
{{ activity.content }}
|
|
</el-timeline-item>
|
|
</el-timeline>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import { MoreFilled } from '@element-plus/icons-vue'
|
|
import type { TimelineItemProps } from 'element-plus'
|
|
|
|
interface ActivityType extends Partial<TimelineItemProps> {
|
|
content: string
|
|
}
|
|
|
|
const activities: ActivityType[] = [
|
|
{
|
|
content: 'Custom icon',
|
|
timestamp: '2018-04-12 20:46',
|
|
size: 'large',
|
|
type: 'primary',
|
|
icon: MoreFilled,
|
|
},
|
|
{
|
|
content: 'Custom color',
|
|
timestamp: '2018-04-03 20:46',
|
|
color: '#0bbd87',
|
|
},
|
|
{
|
|
content: 'Custom size',
|
|
timestamp: '2018-04-03 20:46',
|
|
size: 'large',
|
|
},
|
|
{
|
|
content: 'Custom hollow',
|
|
timestamp: '2018-04-03 20:46',
|
|
type: 'primary',
|
|
hollow: true,
|
|
},
|
|
{
|
|
content: 'Default node',
|
|
timestamp: '2018-04-03 20:46',
|
|
},
|
|
]
|
|
</script>
|