W3Cschool
恭喜您成為首批注冊(cè)用戶
獲得88經(jīng)驗(yàn)值獎(jiǎng)勵(lì)
可視化地呈現(xiàn)時(shí)間流信息。
Timeline 可拆分成多個(gè)按照時(shí)間戳排列的 activity,時(shí)間戳是其區(qū)分于其他控件的重要特征,使用時(shí)注意與 Steps 步驟條等區(qū)分。
<template>
<div class="block">
<el-timeline>
<el-timeline-item
v-for="(activity, index) in activities"
:key="index"
:timestamp="activity.timestamp"
>
{{activity.content}}
</el-timeline-item>
</el-timeline>
</div>
</template>
<script>
export default {
data() {
return {
activities: [
{
content: '活動(dòng)按期開始',
timestamp: '2018-04-15',
},
{
content: '通過(guò)審核',
timestamp: '2018-04-13',
},
{
content: '創(chuàng)建成功',
timestamp: '2018-04-11',
},
],
}
},
}
</script>
可根據(jù)實(shí)際場(chǎng)景自定義節(jié)點(diǎn)尺寸、顏色,或直接使用圖標(biāo)。
<template>
<div class="block">
<el-timeline>
<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>
</div>
</template>
<script>
export default {
data() {
return {
activities: [
{
content: '支持使用圖標(biāo)',
timestamp: '2018-04-12 20:46',
size: 'large',
type: 'primary',
icon: 'el-icon-more',
},
{
content: '支持自定義顏色',
timestamp: '2018-04-03 20:46',
color: '#0bbd87',
},
{
content: '支持自定義尺寸',
timestamp: '2018-04-03 20:46',
size: 'large',
},
{
content: '支持空心點(diǎn)',
timestamp: '2018-04-03 20:46',
type: 'primary',
hollow: true,
},
{
content: '默認(rèn)樣式的節(jié)點(diǎn)',
timestamp: '2018-04-03 20:46',
},
],
}
},
}
</script>
當(dāng)內(nèi)容在垂直方向上過(guò)高時(shí),可將時(shí)間戳置于內(nèi)容之上。
<template>
<div class="block">
<el-timeline>
<el-timeline-item timestamp="2018/4/12" placement="top">
<el-card>
<h4>更新 Github 模板</h4>
<p>王小虎 提交于 2018/4/12 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/3" placement="top">
<el-card>
<h4>更新 Github 模板</h4>
<p>王小虎 提交于 2018/4/3 20:46</p>
</el-card>
</el-timeline-item>
<el-timeline-item timestamp="2018/4/2" placement="top">
<el-card>
<h4>更新 Github 模板</h4>
<p>王小虎 提交于 2018/4/2 20:46</p>
</el-card>
</el-timeline-item>
</el-timeline>
</div>
</template>
參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
---|---|---|---|---|
timestamp | 時(shí)間戳 | string | — | — |
hide-timestamp | 是否隱藏時(shí)間戳 | boolean | — | false |
placement | 時(shí)間戳位置 | string | top / bottom | bottom |
type | 節(jié)點(diǎn)類型 | string | primary / success / warning / danger / info | — |
color | 節(jié)點(diǎn)顏色 | string | hsl / hsv / hex / rgb | — |
size | 節(jié)點(diǎn)尺寸 | string | normal / large | normal |
icon | 節(jié)點(diǎn)圖標(biāo) | string | — | — |
hollow | 是否空心點(diǎn) | boolean | — | false |
name | 說(shuō)明 |
---|---|
— | Timeline-Item 的內(nèi)容 |
dot | 自定義節(jié)點(diǎn) |
Copyright©2021 w3cschool編程獅|閩ICP備15016281號(hào)-3|閩公網(wǎng)安備35020302033924號(hào)
違法和不良信息舉報(bào)電話:173-0602-2364|舉報(bào)郵箱:jubao@eeedong.com
掃描二維碼
下載編程獅App
編程獅公眾號(hào)
聯(lián)系方式:
更多建議: