时间线

v-timeline 在样式上显示时间顺序信息时很有用。

用例

v-timeline 以其最简单的形式显示一条垂直时间线，其中应至少包含一个 v-timeline-item。

template

  1. <template>
  2.   <v-timeline>
  3.     <v-timeline-item>timeline item</v-timeline-item>
  4.     <v-timeline-item class="text-right">timeline item</v-timeline-item>
  5.     <v-timeline-item>timeline item</v-timeline-item>
  6.   </v-timeline>
  7. </template>

Timelines（时间线） - 图1

API

从下面选择您想要的组件，并查看可用的属性、插槽、事件和函数。

Timelines（时间线） - 图2

实战场

template script

  1. <template>
  2.   <div>
  3.     <v-radio-group row wrap>
  4.       <v-switch v-model="alignTop" label="Toggle align-top" class="mx-4"></v-switch>
  5.       <v-switch v-model="dense" label="Toggle dense" class="mx-4"></v-switch>
  6.       <v-switch v-model="fillDot" label="Toggle fill-dot" class="mx-4"></v-switch>
  7.       <v-switch v-model="hideDot" label="Toggle hide-dot" class="mx-4"></v-switch>
  8.       <v-switch v-model="icon" label="Toggle icon" class="mx-4"></v-switch>
  9.       <v-switch v-model="avatar" label="Toggle avatar" class="mx-4"></v-switch>
  10.       <v-switch v-model="iconColor" label="Toggle icon color" class="mx-4"></v-switch>
  11.       <v-switch v-model="reverse" label="Toggle reverse" class="mx-4"></v-switch>
  12.       <v-switch v-model="left" label="Toggle left" class="mx-4"></v-switch>
  13.       <v-switch v-model="right" label="Toggle right" class="mx-4"></v-switch>
  14.       <v-switch v-model="small" label="Toggle small" class="mx-4"></v-switch>
  15.     </v-radio-group>
  17.     <v-timeline
  18.       :align-top="alignTop"
  19.       :dense="dense"
  20.       :reverse="reverse"
  21.     >
  22.       <v-timeline-item
  23.         v-for="n in 3"
  24.         :key="n"
  25.         :fill-dot="fillDot"
  26.         :hide-dot="hideDot"
  27.         :icon="icon ? 'mdi-star' : ''"
  28.         :icon-color=" iconColor ? 'deep-orange' : ''"
  29.         :left="left"
  30.         :right="right"
  31.         :small="small"
  32.       >
  33.         <template v-slot:icon>
  34.           <v-avatar v-if="avatar">
  35.             <img src="http://i.pravatar.cc/64">
  36.           </v-avatar>
  37.         </template>
  38.         <span slot="opposite">Tus eu perfecto</span>
  39.         <v-card class="elevation-2">
  40.           <v-card-title class="headline">Lorem ipsum</v-card-title>
  41.           <v-card-text>
  42.             Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
  43.           </v-card-text>
  44.         </v-card>
  45.       </v-timeline-item>
  46.     </v-timeline>
  47.   </div>
  48. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       alignTop: false,
  5.       avatar: false,
  6.       dense: false,
  7.       fillDot: false,
  8.       hideDot: false,
  9.       icon: false,
  10.       iconColor: false,
  11.       left: false,
  12.       reverse: false,
  13.       right: false,
  14.       small: false,
  15.     }),
  16.   }
  17. </script>

Timelines（时间线） - 图3

示例

下面是一些简单到复杂的例子。

小点

small 属性允许多种样式提供独特的设计。

template

  1. <template>
  2.   <v-timeline :dense="$vuetify.breakpoint.smAndDown">
  3.     <v-timeline-item
  4.       color="purple lighten-2"
  5.       fill-dot
  6.       right
  7.     >
  8.       <v-card>
  9.         <v-card-title class="purple lighten-2">
  10.           <v-icon
  11.             dark
  12.             size="42"
  13.             class="mr-4"
  14.           >
  15.             mdi-magnify
  16.           </v-icon>
  17.           <h2 class="display-1 white--text font-weight-light">Title 1</h2>
  18.         </v-card-title>
  19.         <v-container>
  20.           <v-row>
  21.             <v-col cols="12" md="10">
  22.               Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit.
  23.             </v-col>
  24.             <v-col
  25.               class="hidden-sm-and-down text-right"
  26.               md="2"
  27.             >
  28.               <v-icon size="64">mdi-calendar-text</v-icon>
  29.             </v-col>
  30.           </v-row>
  31.         </v-container>
  32.       </v-card>
  33.     </v-timeline-item>
  35.     <v-timeline-item
  36.       color="amber lighten-1"
  37.       fill-dot
  38.       left
  39.       small
  40.     >
  41.       <v-card>
  42.         <v-card-title class="amber lighten-1 justify-end">
  43.           <h2 class="display-1 mr-4 white--text font-weight-light">Title 2</h2>
  44.           <v-icon
  45.             dark
  46.             size="42"
  47.           >mdi-home-outline</v-icon>
  48.         </v-card-title>
  49.         <v-container>
  50.           <v-row>
  51.             <v-col cols="12" md="8">
  52.               Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit.
  53.             </v-col>
  54.             <v-col cols="12" md="4">
  55.               Lorem ipsum dolor sit amet, no nam oblique veritus.
  56.             </v-col>
  57.           </v-row>
  58.         </v-container>
  59.       </v-card>
  60.     </v-timeline-item>
  62.     <v-timeline-item
  63.       color="cyan lighten-1"
  64.       fill-dot
  65.       right
  66.     >
  67.       <v-card>
  68.         <v-card-title class="cyan lighten-1">
  69.           <v-icon
  70.             class="mr-4"
  71.             dark
  72.             size="42"
  73.           >
  74.             mdi-email-outline
  75.           </v-icon>
  76.           <h2 class="display-1 white--text font-weight-light">Title 3</h2>
  77.         </v-card-title>
  78.         <v-container>
  79.           <v-row>
  80.             <v-col
  81.               v-for="n in 3"
  82.               :key="n"
  83.               cols="12"
  84.               md="4"
  85.             >
  86.               Lorem ipsum dolor sit amet, no nam oblique veritus no nam oblique.
  87.             </v-col>
  88.           </v-row>
  89.         </v-container>
  90.       </v-card>
  91.     </v-timeline-item>
  93.     <v-timeline-item
  94.       color="red lighten-1"
  95.       fill-dot
  96.       left
  97.       small
  98.     >
  99.       <v-card>
  100.         <v-card-title class="red lighten-1 justify-end">
  101.           <h2 class="display-1 mr-4 white--text font-weight-light">Title 4</h2>
  102.           <v-icon
  103.             dark
  104.             size="42"
  105.           >
  106.             mdi-account-multiple-outline
  107.           </v-icon>
  108.         </v-card-title>
  109.         <v-container>
  110.           <v-row>
  111.             <v-col class="hidden-sm-and-down" md="2">
  112.               <v-icon size="64">mdi-server-network</v-icon>
  113.             </v-col>
  114.             <v-col cols="12" md="10">
  115.               Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus.
  116.             </v-col>
  117.           </v-row>
  118.         </v-container>
  119.       </v-card>
  120.     </v-timeline-item>
  122.     <v-timeline-item
  123.       color="green lighten-1"
  124.       fill-dot
  125.       right
  126.     >
  127.       <v-card>
  128.         <v-card-title class="green lighten-1">
  129.           <v-icon
  130.             class="mr-4"
  131.             dark
  132.             size="42"
  133.           >
  134.             mdi-phone-in-talk
  135.           </v-icon>
  136.           <h2 class="display-1 white--text font-weight-light">Title 5</h2>
  137.         </v-card-title>
  138.         <v-container>
  139.           <v-row>
  140.             <v-col>
  141.               Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
  142.             </v-col>
  143.           </v-row>
  144.         </v-container>
  145.       </v-card>
  146.     </v-timeline-item>
  147.   </v-timeline>
  148. </template>

Timelines（时间线） - 图4

图标点

有条件地使用 v-timeline-item 点内的图标来提供其他上下文。

template script

  1. <template>
  2.   <v-timeline align-top :dense="$vuetify.breakpoint.smAndDown">
  3.     <v-timeline-item
  4.       v-for="(item, i) in items"
  5.       :key="i"
  6.       :color="item.color"
  7.       :icon="item.icon"
  8.       fill-dot
  9.     >
  10.       <v-card
  11.         :color="item.color"
  12.         dark
  13.       >
  14.         <v-card-title class="title">Lorem Ipsum Dolor</v-card-title>
  15.         <v-card-text class="white text--primary">
  16.           <p>Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.</p>
  17.           <v-btn
  18.             :color="item.color"
  19.             class="mx-0"
  20.             outlined
  21.           >
  22.             Button
  23.           </v-btn>
  24.         </v-card-text>
  25.       </v-card>
  26.     </v-timeline-item>
  27.   </v-timeline>
  28. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       items: [
  5.         {
  6.           color: 'red lighten-2',
  7.           icon: 'mdi-star',
  8.         },
  9.         {
  10.           color: 'purple darken-1',
  11.           icon: 'mdi-book-variant',
  12.         },
  13.         {
  14.           color: 'green lighten-1',
  15.           icon: 'mdi-airballoon',
  16.         },
  17.         {
  18.           color: 'indigo',
  19.           icon: 'mdi-buffer',
  20.         },
  21.       ],
  22.     }),
  23.   }
  24. </script>

Timelines（时间线） - 图5

反向方向

您可以使用 reverse 属性来反转时间轴项目的方向。这在默认和 dense 模式下都能工作。

template script

  1. <template>
  2.   <div>
  3.     <v-switch v-model="reverse" label="Toggle reverse"></v-switch>
  4.     <v-timeline :reverse="reverse" :dense="$vuetify.breakpoint.smAndDown">
  5.       <v-timeline-item
  6.         v-for="n in 2"
  7.         :key="n"
  8.       >
  9.         <span slot="opposite">Tus eu perfecto</span>
  10.         <v-card class="elevation-2">
  11.           <v-card-title class="headline">Lorem ipsum</v-card-title>
  12.           <v-card-text>
  13.             Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
  14.           </v-card-text>
  15.         </v-card>
  16.       </v-timeline-item>
  17.     </v-timeline>
  18.     <v-timeline :reverse="reverse" dense>
  19.       <v-timeline-item
  20.         v-for="n in 2"
  21.         :key="n"
  22.       >
  23.         <span slot="opposite">Tus eu perfecto</span>
  24.         <v-card class="elevation-2">
  25.           <v-card-title class="headline">Lorem ipsum</v-card-title>
  26.           <v-card-text>
  27.             Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
  28.           </v-card-text>
  29.         </v-card>
  30.       </v-timeline-item>
  31.     </v-timeline>
  32.   </div>
  33. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       reverse: true,
  5.     }),
  6.   }
  7. </script>

Timelines（时间线） - 图6

时间线卡片

如果将 v-card 放置在 v-timeline-item 的内部，则插入符会出现在卡的侧面。

template

  1. <template>
  2.   <v-timeline>
  3.     <v-timeline-item
  4.       v-for="n in 3"
  5.       :key="n"
  6.       color="red lighten-2"
  7.       large
  8.     >
  9.       <template v-slot:opposite>
  10.         <span>Tus eu perfecto</span>
  11.       </template>
  12.       <v-card class="elevation-2">
  13.         <v-card-title class="headline">Lorem ipsum</v-card-title>
  14.         <v-card-text>
  15.           Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
  16.         </v-card-text>
  17.       </v-card>
  18.     </v-timeline-item>
  19.   </v-timeline>
  20. </template>

Timelines（时间线） - 图7

密度提示框

dense 时间线将所有内容定位在右侧。 在此示例中，v-alert 替换了卡片以提供不同的设计。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="600"
  5.   >
  6.     <v-card-title
  7.       class="blue-grey white--text"
  8.     >
  9.       <span class="title">Logs</span>
  10.       <v-spacer></v-spacer>
  11.       <v-btn
  12.         :outlined="interval == null"
  13.         :color="interval == null ? 'white' : 'primary'"
  14.         dark
  15.         depressed
  16.         @click="interval == null ? start() : stop()"
  17.       >
  18.         Realtime Logging
  19.       </v-btn>
  20.     </v-card-title>
  21.     <v-card-text class="py-0">
  22.       <v-timeline dense>
  23.         <v-slide-x-reverse-transition
  24.           group
  25.           hide-on-leave
  26.         >
  27.           <v-timeline-item
  28.             v-for="item in items"
  29.             :key="item.id"
  30.             :color="item.color"
  31.             small
  32.             fill-dot
  33.           >
  34.             <v-alert
  35.               :value="true"
  36.               :color="item.color"
  37.               :icon="item.icon"
  38.               class="white--text"
  39.             >
  40.               Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
  41.             </v-alert>
  42.           </v-timeline-item>
  43.         </v-slide-x-reverse-transition>
  44.       </v-timeline>
  45.     </v-card-text>
  46.   </v-card>
  47. </template>
  1. <script>
  2.   const COLORS = [
  3.     'info',
  4.     'warning',
  5.     'error',
  6.     'success',
  7.   ]
  8.   const ICONS = {
  9.     info: 'mdi-information',
  10.     warning: 'mdi-alert',
  11.     error: 'mdi-alert-circle',
  12.     success: 'mdi-check-circle',
  13.   }
  15.   export default {
  16.     data: () => ({
  17.       interval: null,
  18.       items: [
  19.         {
  20.           id: 1,
  21.           color: 'info',
  22.           icon: ICONS['info'],
  23.         },
  24.       ],
  25.       nonce: 2,
  26.     }),
  28.     beforeDestroy () {
  29.       this.stop()
  30.     },
  32.     methods: {
  33.       addEvent () {
  34.         let { color, icon } = this.genAlert()
  36.         const previousColor = this.items[0].color
  38.         while (previousColor === color) {
  39.           color = this.genColor()
  40.         }
  42.         this.items.unshift({
  43.           id: this.nonce++,
  44.           color,
  45.           icon,
  46.         })
  48.         if (this.nonce > 6) {
  49.           this.items.pop()
  50.         }
  51.       },
  52.       genAlert () {
  53.         const color = this.genColor()
  55.         return {
  56.           color,
  57.           icon: this.genIcon(color),
  58.         }
  59.       },
  60.       genColor () {
  61.         return COLORS[Math.floor(Math.random() * 3)]
  62.       },
  63.       genIcon (color) {
  64.         return ICONS[color]
  65.       },
  66.       start () {
  67.         this.interval = setInterval(this.addEvent, 3000)
  68.       },
  69.       stop () {
  70.         clearInterval(this.interval)
  71.         this.interval = null
  72.       },
  73.     },
  74.   }
  75. </script>

Timelines（时间线） - 图8

Vuetify Epic Backpack

The Vuetify Epic Backpack is a premium backpack that has a spot for everything you travel with.

ads by Vuetify

](https://store.vuetifyjs.com/product/vuetify-epic-backpack?ref=vuetifyjs.com)

相反的插槽

opposite 插槽在您的时间线内提供额外的自定义层。

template script

  1. <template>
  2.   <v-timeline>
  3.     <v-timeline-item
  4.       v-for="(year, i) in years"
  5.       :key="i"
  6.       :color="year.color"
  7.       small
  8.     >
  9.       <template v-slot:opposite>
  10.         <span
  11.           :class="`headline font-weight-bold ${year.color}--text`"
  12.           v-text="year.year"
  13.         ></span>
  14.       </template>
  15.       <div class="py-4">
  16.         <h2 :class="`headline font-weight-light mb-4 ${year.color}--text`">Lorem ipsum</h2>
  17.         <div>
  18.           Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.
  19.         </div>
  20.       </div>
  21.     </v-timeline-item>
  22.   </v-timeline>
  23. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       years: [
  5.         {
  6.           color: 'cyan',
  7.           year: '1960',
  8.         },
  9.         {
  10.           color: 'green',
  11.           year: '1970',
  12.         },
  13.         {
  14.           color: 'pink',
  15.           year: '1980',
  16.         },
  17.         {
  18.           color: 'amber',
  19.           year: '1990',
  20.         },
  21.         {
  22.           color: 'orange',
  23.           year: '2000',
  24.         },
  25.       ],
  26.     }),
  27.   }
  28. </script>

Timelines（时间线） - 图9

头像点

使用 icon 插槽和 v-avatar，将头像插入点中。

template

  1. <template>
  2.   <v-timeline>
  3.     <v-timeline-item
  4.       v-for="n in 4"
  5.       :key="n"
  6.       large
  7.     >
  8.       <template v-slot:icon>
  9.         <v-avatar>
  10.           <img src="http://i.pravatar.cc/64">
  11.         </v-avatar>
  12.       </template>
  13.       <template v-slot:opposite>
  14.         <span>Tus eu perfecto</span>
  15.       </template>
  16.       <v-card class="elevation-2">
  17.         <v-card-title class="headline">Lorem ipsum</v-card-title>
  18.         <v-card-text>Lorem ipsum dolor sit amet, no nam oblique veritus. Commune scaevola imperdiet nec ut, sed euismod convenire principes at. Est et nobis iisque percipit, an vim zril disputando voluptatibus, vix an salutandi sententiae.</v-card-text>
  19.       </v-card>
  20.     </v-timeline-item>
  21.   </v-timeline>
  22. </template>

Timelines（时间线） - 图10

彩色点

彩色的点可以创建可视的断点，使您的时间线更容易阅读。

template

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="400"
  5.   >
  6.     <v-card
  7.       dark
  8.       flat
  9.     >
  10.       <v-btn
  11.         absolute
  12.         bottom
  13.         color="pink"
  14.         right
  15.         fab
  16.       >
  17.         <v-icon>mdi-plus</v-icon>
  18.       </v-btn>
  19.       <v-card-title class="pa-2 purple lighten-3">
  20.         <v-btn icon>
  21.           <v-icon>mdi-menu</v-icon>
  22.         </v-btn>
  23.         <h3 class="title font-weight-light text-center grow">Timeline</h3>
  24.         <v-avatar>
  25.           <v-img src="https://avataaars.io/?avatarStyle=Circle&topType=LongHairStraight&accessoriesType=Blank&hairColor=BrownDark&facialHairType=Blank&clotheType=BlazerShirt&eyeType=Default&eyebrowType=Default&mouthType=Default&skinColor=Light"></v-img>
  26.         </v-avatar>
  27.       </v-card-title>
  28.       <v-img
  29.         src="https://cdn.vuetifyjs.com/images/cards/forest.jpg"
  30.         gradient="to top, rgba(0,0,0,.44), rgba(0,0,0,.44)"
  31.       >
  32.         <v-container class="fill-height">
  33.           <v-row align="center">
  34.             <strong class="display-4 font-weight-regular mr-6">8</strong>
  35.             <v-row justify="end">
  36.               <div class="headline font-weight-light">Monday</div>
  37.               <div class="text-uppercase font-weight-light">February 2015</div>
  38.             </v-row>
  39.           </v-row>
  40.         </v-container>
  41.       </v-img>
  42.     </v-card>
  43.     <v-card-text class="py-0">
  44.       <v-timeline
  45.         align-top
  46.         dense
  47.       >
  48.         <v-timeline-item
  49.           color="pink"
  50.           small
  51.         >
  52.           <v-row class="pt-1">
  53.             <v-col cols="3">
  54.               <strong>5pm</strong>
  55.             </v-col>
  56.             <v-col>
  57.               <strong>New Icon</strong>
  58.               <div class="caption">Mobile App</div>
  59.             </v-col>
  60.           </v-row>
  61.         </v-timeline-item>
  63.         <v-timeline-item
  64.           color="teal lighten-3"
  65.           small
  66.         >
  67.           <v-row class="pt-1">
  68.             <v-col cols="3">
  69.               <strong>3-4pm</strong>
  70.             </v-col>
  71.             <v-col>
  72.               <strong>Design Stand Up</strong>
  73.               <div class="caption mb-2">Hangouts</div>
  74.               <v-avatar>
  75.                 <v-img
  76.                   src="https://avataaars.io/?avatarStyle=Circle&topType=LongHairFrida&accessoriesType=Kurt&hairColor=Red&facialHairType=BeardLight&facialHairColor=BrownDark&clotheType=GraphicShirt&clotheColor=Gray01&graphicType=Skull&eyeType=Wink&eyebrowType=RaisedExcitedNatural&mouthType=Disbelief&skinColor=Brown"
  77.                 ></v-img>
  78.               </v-avatar>
  79.               <v-avatar>
  81.                 <v-img
  82.                   src="https://avataaars.io/?avatarStyle=Circle&topType=ShortHairFrizzle&accessoriesType=Prescription02&hairColor=Black&facialHairType=MoustacheMagnum&facialHairColor=BrownDark&clotheType=BlazerSweater&clotheColor=Black&eyeType=Default&eyebrowType=FlatNatural&mouthType=Default&skinColor=Tanned"
  83.                 ></v-img>
  84.               </v-avatar>
  85.               <v-avatar>
  86.                 <v-img
  87.                   src="https://avataaars.io/?avatarStyle=Circle&topType=LongHairMiaWallace&accessoriesType=Sunglasses&hairColor=BlondeGolden&facialHairType=Blank&clotheType=BlazerSweater&eyeType=Surprised&eyebrowType=RaisedExcited&mouthType=Smile&skinColor=Pale"
  88.                 ></v-img>
  89.               </v-avatar>
  90.             </v-col>
  91.           </v-row>
  92.         </v-timeline-item>
  94.         <v-timeline-item
  95.           color="pink"
  96.           small
  97.         >
  98.           <v-row class="pt-1">
  99.             <v-col cols="3">
  100.               <strong>12pm</strong>
  101.             </v-col>
  102.             <v-col>
  103.               <strong>Lunch break</strong>
  104.             </v-col>
  105.           </v-row>
  106.         </v-timeline-item>
  108.         <v-timeline-item
  109.           color="teal lighten-3"
  110.           small
  111.         >
  112.           <v-row class="pt-1">
  113.             <v-col cols="3">
  114.               <strong>9-11am</strong>
  115.             </v-col>
  116.             <v-col>
  117.               <strong>Finish Home Screen</strong>
  118.               <div class="caption">Web App</div>
  119.             </v-col>
  120.           </v-row>
  121.         </v-timeline-item>
  122.       </v-timeline>
  123.     </v-card-text>
  124.   </v-card>
  125. </template>

Timelines（时间线） - 图11

高级版

模块化组件允许您创建高度定制的解决方案。

template script

  1. <template>
  2.   <v-container style="max-width: 600px;">
  3.     <v-timeline dense clipped>
  4.       <v-timeline-item
  5.         fill-dot
  6.         class="white--text mb-12"
  7.         color="orange"
  8.         large
  9.       >
  10.         <template v-slot:icon>
  11.           <span>JL</span>
  12.         </template>
  13.         <v-text-field
  14.           v-model="input"
  15.           hide-details
  16.           flat
  17.           label="Leave a comment..."
  18.           solo
  19.           @keydown.enter="comment"
  20.         >
  21.           <template v-slot:append>
  22.             <v-btn
  23.               class="mx-0"
  24.               depressed
  25.               @click="comment"
  26.             >
  27.               Post
  28.             </v-btn>
  29.           </template>
  30.         </v-text-field>
  31.       </v-timeline-item>
  33.       <v-slide-x-transition
  34.         group
  35.       >
  36.         <v-timeline-item
  37.           v-for="event in timeline"
  38.           :key="event.id"
  39.           class="mb-4"
  40.           color="pink"
  41.           small
  42.         >
  43.           <v-row justify="space-between">
  44.             <v-col cols="7" v-text="event.text"></v-col>
  45.             <v-col class="text-right" cols="5" v-text="event.time"></v-col>
  46.           </v-row>
  47.         </v-timeline-item>
  48.       </v-slide-x-transition>
  50.       <v-timeline-item
  51.         class="mb-6"
  52.         hide-dot
  53.       >
  54.         <span>TODAY</span>
  55.       </v-timeline-item>
  57.       <v-timeline-item
  58.         class="mb-4"
  59.         color="grey"
  60.         icon-color="grey lighten-2"
  61.         small
  62.       >
  63.         <v-row justify="space-between">
  64.           <v-col cols="7">This order was archived.</v-col>
  65.           <v-col class="text-right" cols="5">15:26 EDT</v-col>
  66.         </v-row>
  67.       </v-timeline-item>
  69.       <v-timeline-item
  70.         class="mb-4"
  71.         small
  72.       >
  73.         <v-row justify="space-between">
  74.           <v-col cols="7">
  75.             <v-chip
  76.               class="white--text ml-0"
  77.               color="purple"
  78.               label
  79.               small
  80.             >
  81.               APP
  82.             </v-chip>
  83.             Digital Downloads fulfilled 1 item.
  84.           </v-col>
  85.           <v-col class="text-right" cols="5">15:25 EDT</v-col>
  86.         </v-row>
  87.       </v-timeline-item>
  89.       <v-timeline-item
  90.         class="mb-4"
  91.         color="grey"
  92.         small
  93.       >
  94.         <v-row justify="space-between">
  95.           <v-col cols="7">
  96.             Order confirmation email was sent to John Leider (john@vuetifyjs.com).
  97.           </v-col>
  98.           <v-col class="text-right" cols="5">15:25 EDT</v-col>
  99.         </v-row>
  100.       </v-timeline-item>
  102.       <v-timeline-item
  103.         class="mb-4"
  104.         hide-dot
  105.       >
  106.         <v-btn
  107.           class="mx-0"
  108.           color="white"
  109.         >
  110.           Resend Email
  111.         </v-btn>
  112.       </v-timeline-item>
  114.       <v-timeline-item
  115.         class="mb-4"
  116.         color="grey"
  117.         small
  118.       >
  119.         <v-row justify="space-between">
  120.           <v-col cols="7">
  121.             A $15.00 USD payment was processed on PayPal Express Checkout
  122.           </v-col>
  123.           <v-col class="text-right" cols="5">15:25 EDT</v-col>
  124.         </v-row>
  125.       </v-timeline-item>
  127.       <v-timeline-item
  128.         color="grey"
  129.         small
  130.       >
  131.         <v-row justify="space-between">
  132.           <v-col cols="7">
  133.             John Leider placed this order on Online Store (checkout #1937432132572).
  134.           </v-col>
  135.           <v-col class="text-right" cols="5">15:25 EDT</v-col>
  136.         </v-row>
  137.       </v-timeline-item>
  138.     </v-timeline>
  139.   </v-container>
  140. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       events: [],
  5.       input: null,
  6.       nonce: 0,
  7.     }),
  9.     computed: {
  10.       timeline () {
  11.         return this.events.slice().reverse()
  12.       },
  13.     },
  15.     methods: {
  16.       comment () {
  17.         const time = (new Date()).toTimeString()
  18.         this.events.push({
  19.           id: this.nonce++,
  20.           text: this.input,
  21.           time: time.replace(/:\d{2}\sGMT-\d{4}\s\((.*)\)/, (match, contents, offset) => {
  22.             return ` ${contents.split(' ').map(v => v.charAt(0)).join('')}`
  23.           }),
  24.         })
  26.         this.input = null
  27.       },
  28.     },
  29.   }
  30. </script>

Timelines（时间线） - 图12