进度线

v-progress-lineear 组件用于将数据直观传输给用户。它们也可以表示一个不确定的数量，如加载或处理。

用例

最简单的形式，v-progress-linear 显示一个水平进度条。使用 value 属性来控制进度。

template

  1. <template>
  2.   <v-progress-linear value="15"></v-progress-linear>
  3. </template>

Linear（进度线） - 图1

API

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

Linear（进度线） - 图2

实战场

template script

  1. <template>
  2.   <v-row justify="center" align="center">
  3.     <v-container>
  4.       <v-progress-linear
  5.         :active="active"
  6.         :background-opacity="opacity"
  7.         :bottom="bottom"
  8.         :buffer-value="buffer"
  9.         :height="height"
  10.         :indeterminate="indeterminate"
  11.         :query="query"
  12.         :rounded="rounded"
  13.         :stream="stream"
  14.         :striped="striped"
  15.         :top="top"
  16.         :value="value"
  17.         color="light-blue"
  18.       ></v-progress-linear>
  19.     </v-container>
  21.     <v-row>
  22.       <v-col cols="12" md="6" lg="3">
  23.         <v-text-field
  24.           v-model="buffer"
  25.           class="mx-4"
  26.           label="Buffer"
  27.           max="100"
  28.           min="1"
  29.           step="1"
  30.           style="width: 125px"
  31.           type="number"
  32.           @keydown="false"
  33.         ></v-text-field>
  34.       </v-col>
  35.       <v-col cols="12" md="6" lg="3">
  36.         <v-text-field
  37.           v-model="height"
  38.           class="mx-4"
  39.           label="Height - px"
  40.           max="100"
  41.           min="1"
  42.           step="1"
  43.           style="width: 125px"
  44.           type="number"
  45.           @keydown="false"
  46.         ></v-text-field>
  47.       </v-col>
  48.       <v-col cols="12" md="6" lg="3">
  49.         <v-text-field
  50.           v-model="opacity"
  51.           class="mx-4"
  52.           label="Opacity"
  53.           max="1"
  54.           min="0"
  55.           step=".01"
  56.           style="width: 125px"
  57.           type="number"
  58.           @keydown="false"
  59.         ></v-text-field>
  60.       </v-col>
  61.       <v-col cols="12" md="6" lg="3">
  62.         <v-text-field
  63.           v-model="value"
  64.           class="mx-4"
  65.           label="Value - %"
  66.           max="100"
  67.           min="1"
  68.           step="1"
  69.           style="width: 125px"
  70.           type="number"
  71.           @keydown="false"
  72.         ></v-text-field>
  73.       </v-col>
  74.       <v-col cols="6" md="3">
  75.         <v-switch v-model="active" label="Toggle active" class="mx-4"></v-switch>
  76.       </v-col>
  77.       <v-col cols="6" md="3">
  78.         <v-switch v-model="bottom" label="Toggle bottom" class="mx-4"></v-switch>
  79.       </v-col>
  80.       <v-col cols="6" md="3">
  81.         <v-switch v-model="indeterminate" label="Toggle indeterminate" class="mx-4"></v-switch>
  82.       </v-col>
  83.       <v-col cols="6" md="3">
  84.         <v-switch v-model="query" label="Toggle query" class="mx-4"></v-switch>
  85.       </v-col>
  86.       <v-col cols="6" md="3">
  87.         <v-switch v-model="rounded" label="Toggle rounded" class="mx-4"></v-switch>
  88.       </v-col>
  89.       <v-col cols="6" md="3">
  90.         <v-switch v-model="stream" label="Toggle stream" class="mx-4"></v-switch>
  91.       </v-col>
  92.       <v-col cols="6" md="3">
  93.         <v-switch v-model="striped" label="Toggle striped" class="mx-4"></v-switch>
  94.       </v-col>
  95.       <v-col cols="6" md="3">
  96.         <v-switch v-model="top" label="Toggle top" class="mx-4"></v-switch>
  97.       </v-col>
  98.     </v-row>
  99.   </v-row>
  100. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       absolute: false,
  5.       active: true,
  6.       opacity: 0.3,
  7.       bottom: false,
  8.       buffer: 100,
  9.       fixed: false,
  10.       height: 4,
  11.       indeterminate: false,
  12.       query: false,
  13.       rounded: false,
  14.       stream: false,
  15.       striped: false,
  16.       top: false,
  17.       value: 25,
  18.     }),
  19.   }
  20. </script>

Linear（进度线） - 图3

示例

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

定值线条

进度线条组件可以有一个由 v-model 修改的确定性状态。

template script

  1. <template>
  2.   <div>
  3.     <v-progress-linear
  4.       v-model="valueDeterminate"
  5.       color="deep-purple accent-4"
  6.     ></v-progress-linear>
  7.     <br>
  8.     <v-progress-linear
  9.       v-model="valueDeterminate"
  10.       color="pink"
  11.     ></v-progress-linear>
  12.     <br>
  13.     <v-progress-linear
  14.       v-model="valueDeterminate"
  15.       color="indigo darken-2"
  16.     ></v-progress-linear>
  17.     <br>
  18.     <v-progress-linear
  19.       v-model="valueDeterminate"
  20.       color="amber"
  21.     ></v-progress-linear>
  22.   </div>
  23. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         valueDeterminate: 50,
  6.       }
  7.     },
  8.   }
  9. </script>

Linear（进度线） - 图4

不定线条

使用 indeterminate 属性, v-progress-linear 持续不断的动画。

template

  1. <template>
  2.   <div>
  3.     <v-progress-linear
  4.       indeterminate
  5.       color="yellow darken-2"
  6.     ></v-progress-linear>
  7.     <br>
  8.     <v-progress-linear
  9.       indeterminate
  10.       color="green"
  11.     ></v-progress-linear>
  12.     <br>
  13.     <v-progress-linear
  14.       indeterminate
  15.       color="teal"
  16.     ></v-progress-linear>
  17.     <br>
  18.     <v-progress-linear
  19.       indeterminate
  20.       color="cyan"
  21.     ></v-progress-linear>
  22.   </div>
  23. </template>

Linear（进度线） - 图5

缓冲

缓冲区状态同时表示两个值。 主值由 v-model 控制，而缓冲区由 buffer-value 属性控制。

template script

  1. <template>
  2.   <div>
  3.     <v-progress-linear
  4.       v-model="value"
  5.       :buffer-value="bufferValue"
  6.     ></v-progress-linear>
  7.     <br>
  8.     <v-progress-linear
  9.       v-model="value"
  10.       :buffer-value="bufferValue"
  11.       color="purple"
  12.     ></v-progress-linear>
  13.     <br>
  14.     <v-progress-linear
  15.       v-model="value"
  16.       :buffer-value="bufferValue"
  17.       color="red lighten-2"
  18.     ></v-progress-linear>
  19.     <br>
  20.     <v-progress-linear
  21.       v-model="value"
  22.       :buffer-value="bufferValue"
  23.       color="black"
  24.     ></v-progress-linear>
  25.   </div>
  26. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         value: 10,
  6.         bufferValue: 20,
  7.         interval: 0,
  8.       }
  9.     },
  11.     watch: {
  12.       value (val) {
  13.         if (val < 100) return
  15.         this.value = 0
  16.         this.bufferValue = 10
  17.         this.startBuffer()
  18.       },
  19.     },
  21.     mounted () {
  22.       this.startBuffer()
  23.     },
  25.     beforeDestroy () {
  26.       clearInterval(this.interval)
  27.     },
  29.     methods: {
  30.       startBuffer () {
  31.         clearInterval(this.interval)
  33.         this.interval = setInterval(() => {
  34.           this.value += Math.random() * (15 - 5) + 5
  35.           this.bufferValue += Math.random() * (15 - 5) + 6
  36.         }, 2000)
  37.       },
  38.     },
  39.   }
  40. </script>

Linear（进度线） - 图6

查询不确定和确定

query 属性设置为 true 时，query 状态由不确定性的真实性控制 。

template script

  1. <template>
  2.   <div style="min-height: 4px;">
  3.     <v-progress-linear
  4.       v-model="value"
  5.       :active="show"
  6.       :indeterminate="query"
  7.       :query="true"
  8.     ></v-progress-linear>
  9.   </div>
  10. </template>
  1. <script>
  2.   export default {
  3.     data () {
  4.       return {
  5.         value: 0,
  6.         query: false,
  7.         show: true,
  8.         interval: 0,
  9.       }
  10.     },
  12.     mounted () {
  13.       this.queryAndIndeterminate()
  14.     },
  16.     beforeDestroy () {
  17.       clearInterval(this.interval)
  18.     },
  20.     methods: {
  21.       queryAndIndeterminate () {
  22.         this.query = true
  23.         this.show = true
  24.         this.value = 0
  26.         setTimeout(() => {
  27.           this.query = false
  29.           this.interval = setInterval(() => {
  30.             if (this.value === 100) {
  31.               clearInterval(this.interval)
  32.               this.show = false
  33.               return setTimeout(this.queryAndIndeterminate, 2000)
  34.             }
  35.             this.value += 25
  36.           }, 1000)
  37.         }, 2500)
  38.       },
  39.     },
  40.   }
  41. </script>

Linear（进度线） - 图7

自定义颜色

您还可以使用属性 color 和 background-color 设置颜色。

template

  1. <template>
  2.   <div>
  3.     <v-progress-linear
  4.       background-color="pink lighten-3"
  5.       color="pink lighten-1"
  6.       value="15"
  7.     ></v-progress-linear>
  8.     <br>
  9.     <v-progress-linear
  10.       background-color="blue-grey"
  11.       color="lime"
  12.       value="30"
  13.     ></v-progress-linear>
  14.     <br>
  15.     <v-progress-linear
  16.       background-color="success"
  17.       color="error"
  18.       value="45"
  19.     ></v-progress-linear>
  20.   </div>
  21. </template>

Linear（进度线） - 图8

圆角

rounded 属性是一种替代样式，为 v-progress-linear 组件添加了边框半径。

template

  1. <template>
  2.   <div>
  3.     <v-progress-linear
  4.       color="red darken-2"
  5.       rounded
  6.       value="100"
  7.     ></v-progress-linear>
  8.     <br>
  9.     <v-progress-linear
  10.       color="indigo"
  11.       rounded
  12.       value="100"
  13.     ></v-progress-linear>
  14.     <br>
  15.     <v-progress-linear
  16.       color="teal"
  17.       rounded
  18.       value="100"
  19.     ></v-progress-linear>
  20.     <br>
  21.     <v-progress-linear
  22.       color="cyan darken-2"
  23.       rounded
  24.       value="100"
  25.     ></v-progress-linear>
  26.   </div>
  27. </template>

Linear（进度线） - 图9

Status Page

You can check the status of the documentation any time on our OhDear! uptime page.

ads by Vuetify

](https://status.vuetifyjs.com?ref=vuetifyjs.com)

流

stream 属性与 buffer-value 一起工作，向用户传达正在进行某些操作。您可以使用 buffer-value 和 value 的任何组合来实现您的设计。

template

  1. <template>
  2.   <div>
  3.     <v-progress-linear
  4.       color="red lighten-2"
  5.       buffer-value="0"
  6.       stream
  7.     ></v-progress-linear>
  8.     <br>
  9.     <v-progress-linear
  10.       color="teal"
  11.       buffer-value="0"
  12.       value="20"
  13.       stream
  14.     ></v-progress-linear>
  15.     <br>
  16.     <v-progress-linear
  17.       buffer-value="50"
  18.       stream
  19.       color="cyan"
  20.     ></v-progress-linear>
  21.     <br>
  22.     <v-progress-linear
  23.       buffer-value="60"
  24.       value="40"
  25.       stream
  26.       color="orange"
  27.     ></v-progress-linear>
  28.   </div>
  29. </template>

Linear（进度线） - 图10

有条纹的

这将在 v-progress-linear 的值部分上应用条纹背景。

template

  1. <template>
  2.   <div>
  3.     <v-progress-linear
  4.       color="light-blue"
  5.       height="10"
  6.       value="10"
  7.       striped
  8.     ></v-progress-linear>
  9.     <br>
  10.     <v-progress-linear
  11.       color="light-green darken-4"
  12.       height="10"
  13.       value="20"
  14.       striped
  15.     ></v-progress-linear>
  16.     <br>
  17.     <v-progress-linear
  18.       height="10"
  19.       value="45"
  20.       striped
  21.       color="lime"
  22.     ></v-progress-linear>
  23.     <br>
  24.     <v-progress-linear
  25.       value="60"
  26.       height="10"
  27.       striped
  28.       color="deep-orange"
  29.     ></v-progress-linear>
  30.   </div>
  31. </template>

Linear（进度线） - 图11

工具栏加载器

使用 absolute 属性，我们可以将 v-progress-linear 组件定位在 v-toolbar 的底部。我们还使用了 active 属性来控制进度的可见性。

template script

  1. <template>
  2.   <v-card
  3.     class="mx-auto mt-6"
  4.     width="344"
  5.   >
  6.     <v-system-bar>
  7.       <v-spacer></v-spacer>
  8.       <v-icon>mdi-square</v-icon>
  9.       <v-icon>mdi-circle</v-icon>
  10.       <v-icon>mdi-triangle</v-icon>
  11.     </v-system-bar>
  13.     <v-toolbar>
  14.       <v-btn icon>
  15.         <v-icon>mdi-arrow-left</v-icon>
  16.       </v-btn>
  18.       <v-toolbar-title>My Recipes</v-toolbar-title>
  20.       <v-progress-linear
  21.         :active="loading"
  22.         :indeterminate="loading"
  23.         absolute
  24.         bottom
  25.         color="deep-purple accent-4"
  26.       ></v-progress-linear>
  28.       <v-spacer></v-spacer>
  30.       <v-btn icon>
  31.         <v-icon>mdi-magnify</v-icon>
  32.       </v-btn>
  34.       <v-btn icon>
  35.         <v-icon>mdi-dots-vertical</v-icon>
  36.       </v-btn>
  37.     </v-toolbar>
  39.     <v-container style="height: 282px;">
  40.       <v-row
  41.         class="fill-height"
  42.         align="center"
  43.         justify="center"
  44.       >
  45.         <v-scale-transition>
  46.           <div
  47.             v-if="!loading"
  48.             class="text-center"
  49.           >
  50.             <v-btn
  51.               color="primary"
  52.               @click="loading = true"
  53.             >Start loading</v-btn>
  54.           </div>
  55.         </v-scale-transition>
  56.       </v-row>
  57.     </v-container>
  58.   </v-card>
  59. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       loading: false,
  5.     }),
  7.     watch: {
  8.       loading (val) {
  9.         if (!val) return
  11.         setTimeout(() => (this.loading = false), 3000)
  12.       },
  13.     },
  14.   }
  15. </script>

Linear（进度线） - 图12

文件加载器

v-progress-linear 组件有助于向用户解释他们正在等待响应。

template

  1. <template>
  2.   <v-card
  3.     class="mx-auto"
  4.     max-width="344"
  5.   >
  6.     <v-toolbar
  7.       color="deep-purple accent-4"
  8.       dark
  9.       prominent
  10.     >
  11.       <v-app-bar-nav-icon></v-app-bar-nav-icon>
  13.       <v-toolbar-title>My Files</v-toolbar-title>
  15.       <v-btn
  16.         absolute
  17.         bottom
  18.         color="white"
  19.         fab
  20.         left
  21.         light
  22.       >
  23.         <v-icon>mdi-plus</v-icon>
  24.       </v-btn>
  26.       <v-spacer></v-spacer>
  28.       <v-btn icon>
  29.         <v-icon>mdi-share-variant</v-icon>
  30.       </v-btn>
  32.       <v-btn icon>
  33.         <v-icon>mdi-magnify</v-icon>
  34.       </v-btn>
  36.       <v-btn icon>
  37.         <v-icon>mdi-dots-vertical</v-icon>
  38.       </v-btn>
  39.     </v-toolbar>
  41.     <v-container style="height: 400px;">
  42.       <v-row
  43.         class="fill-height"
  44.         align-content="center"
  45.         justify="center"
  46.       >
  47.         <v-col
  48.           class="subtitle-1 text-center"
  49.           cols="12"
  50.         >
  51.           Getting your files
  52.         </v-col>
  53.         <v-col cols="6">
  54.           <v-progress-linear
  55.             color="deep-purple accent-4"
  56.             indeterminate
  57.             rounded
  58.             height="6"
  59.           ></v-progress-linear>
  60.         </v-col>
  61.       </v-row>
  62.     </v-container>
  63.   </v-card>
  64. </template>

Linear（进度线） - 图13

插槽

使用 v-model 时，v-progress-linear 组件将响应用户输入。 您可以使用默认插槽或绑定本地模型以显示进度内部。 如果要在线性组件上寻找高级功能，请查看 v-slider。

template script

  1. <template>
  2.   <div>
  3.     <v-progress-linear
  4.       v-model="power"
  5.       color="amber"
  6.       height="25"
  7.       reactive
  8.     ></v-progress-linear>
  10.     <br>
  12.     <v-progress-linear
  13.       v-model="skill"
  14.       color="blue-grey"
  15.       height="25"
  16.       reactive
  17.     >
  18.       <template v-slot="{ value }">
  19.         <strong>{{ Math.ceil(value) }}%</strong>
  20.       </template>
  21.     </v-progress-linear>
  23.     <br>
  25.     <v-progress-linear
  26.       v-model="knowledge"
  27.       height="25"
  28.       reactive
  29.     >
  30.       <strong>{{ Math.ceil(knowledge) }}%</strong>
  31.     </v-progress-linear>
  32.   </div>
  33. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       skill: 20,
  5.       knowledge: 33,
  6.       power: 78,
  7.     }),
  8.   }
  9. </script>

Linear（进度线） - 图14