头像时间轴和圆点时间轴
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
| <v-timeline>
<v-timeline-item v-for="n in 3" :key="n" large>
<template v-slot:icon>
<v-avatar>
<img src="http://i.pravatar.cc/64" />
</v-avatar>
</template>
<template v-slot:opposite>
<span>Tus eu perfecto</span>
</template>
<v-card class="elevation-2">
<v-card-title class="headline">Lorem ipsum</v-card-title>
<v-card-text>Lorem ipsum dolor sit amet.</v-card-text>
</v-card>
</v-timeline-item>
</v-timeline>
<v-card class="mx-auto" max-width="400">
<v-card-text class="py-0">
<v-timeline align-top dense>
<v-timeline-item color="pink" small>
<v-row class="pt-1">
<v-col cols="3">
<strong>5pm</strong>
</v-col>
<v-col>
<strong>New Icon</strong>
<div class="caption">Mobile App</div>
</v-col>
</v-row>
</v-timeline-item>
<v-timeline-item color="teal lighten-3" small>
<v-row class="pt-1">
<v-col cols="3">
<strong>3-4pm</strong>
</v-col>
<v-col>
<strong>Meeting</strong>
<div class="caption mb-2">Hangouts</div>
</v-col>
</v-row>
</v-timeline-item>
<v-timeline-item color="pink" small>
<v-row class="pt-1">
<v-col cols="3">
<strong>12pm</strong>
</v-col>
<v-col>
<strong>Lunch break</strong>
</v-col>
</v-row>
</v-timeline-item>
<v-timeline-item color="teal lighten-3" small>
<v-row class="pt-1">
<v-col cols="3">
<strong>9-11am</strong>
</v-col>
<v-col>
<strong>Go Home</strong>
<div class="caption">Web App</div>
</v-col>
</v-row>
</v-timeline-item>
</v-timeline>
</v-card-text>
</v-card>
|
说明：将头像放入 icon 插槽，opposite 插槽将文本放入卡片对面。align-top 将圆点和 item 对齐到顶部，item 中 color 指圆点颜色。
工具提示
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
| <div class="text-center">
<v-tooltip left>
<template v-slot:activator="{ on, attrs }">
<v-btn color="primary" dark v-bind="attrs" v-on="on">Left</v-btn>
</template>
<span>Left tooltip</span>
</v-tooltip>
</div>
<template>
<v-container fluid class="text-center">
<v-row class="flex" justify="space-between">
<v-col cols="12">
<v-btn @click="show = !show">toggle</v-btn>
</v-col>
<v-col cols="12" class="mt-12">
<v-tooltip v-model="show" top>
<template v-slot:activator="{ on, attrs }">
<v-btn icon v-bind="attrs" v-on="on">
<v-icon color="grey lighten-1">mdi-cart</v-icon>
</v-btn>
</template>
<span>Programmatic tooltip</span>
</v-tooltip>
</v-col>
</v-row>
</v-container>
</template>
|
说明：插槽 activator 放置激活组件，需要将事件侦听器传递给指令，将对象传递给指令：on、v-on、attrs、v-bind，对齐属性有 left、top、bottom、right。还可以用 v-model 来控制工具提示的显示。