骨架装载器

v-skeleton-loader 组件是一种多功能工具，可以在项目中扮演许多角色。 从本质上讲，该组件向用户指示即将到来但尚不可用。 有 30 多个预定义选项可用，可以组合在一起以创建自定义示例。

用例

v-skeleton-loader 组件为用户提供了视觉指示，指示内容 即将到来/正在加载。 比传统的全屏加载器更好。

template script

  1. <template>
  2.   <v-sheet
  3.     :color="`grey ${theme.isDark ? 'darken-2' : 'lighten-4'}`"
  4.     class="px-3 pt-3 pb-3"
  5.   >
  6.     <v-skeleton-loader
  7.       class="mx-auto"
  8.       max-width="300"
  9.       type="card"
  10.     ></v-skeleton-loader>
  11.   </v-sheet>
  12. </template>
  1. <script>
  2.   export default {
  3.     // Vuetify components provide
  4.     // a theme variable that is
  5.     // used to determine dark
  6.     inject: ['theme'],
  7.   }
  8. </script>

Skeleton Loaders（骨架装载器） - 图1

API

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

Skeleton Loaders（骨架装载器） - 图2

实战场

template script

  1. <template>
  2.   <v-sheet
  3.     :color="`grey ${theme.isDark ? 'darken-2' : 'lighten-4'}`"
  4.     class="px-3 pt-3 pb-12"
  5.   >
  6.     <v-responsive
  7.       :max-width="type.indexOf('table') > -1 ? 900 : 500"
  8.       class="mx-auto"
  9.     >
  10.       <v-responsive
  11.         class="mx-auto mb-12"
  12.         max-width="500"
  13.       >
  14.         <div class="d-flex pa-3 align-center flex-wrap">
  15.           <v-select
  16.             v-model="type"
  17.             :items="types"
  18.             class="mr-12"
  19.             hide-details
  20.             label="Pre-made Types"
  21.             filled
  22.             style="max-width: 250px;"
  23.           ></v-select>
  25.           <div>
  26.             <v-switch
  27.               v-model="boilerplate"
  28.               inset
  29.               hide-details
  30.               label="Boilerplate"
  31.             ></v-switch>
  33.             <v-switch
  34.               v-model="tile"
  35.               inset
  36.               hide-details
  37.               label="Tile"
  38.             ></v-switch>
  39.           </div>
  40.         </div>
  41.       </v-responsive>
  43.       <v-skeleton-loader
  44.         ref="skeleton"
  45.         :boilerplate="boilerplate"
  46.         :type="type"
  47.         :tile="tile"
  48.         class="mx-auto"
  49.       ></v-skeleton-loader>
  50.     </v-responsive>
  51.   </v-sheet>
  52. </template>
  1. <script>
  2.   export default {
  3.     // Vuetify components provide
  4.     // a theme variable that is
  5.     // used to determine dark
  6.     inject: ['theme'],
  8.     data: () => ({
  9.       boilerplate: false,
  10.       tile: false,
  11.       type: 'list-item-avatar-three-line',
  12.       types: [],
  13.     }),
  15.     mounted () {
  16.       this.types = Object.keys(this.$refs.skeleton.rootTypes)
  17.     },
  18.   }
  19. </script>

Skeleton Loaders（骨架装载器） - 图3

示例

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

样板组件

v-skeleton-loader 可以在创建模型时使用样板设计。 混合并匹配各种预定义选项，或创建自己的独特实现。 在此示例中，我们将 v-skeleton-loader 扩展到名为 v-boilerplate 的新组件中，以用作功能样板组件。

template script

  1. <template>
  2.   <v-sheet
  3.     :color="`grey ${theme.isDark ? 'darken-2' : 'lighten-4'}`"
  4.     class="px-3 pt-3 pb-12"
  5.   >
  6.     <v-container>
  7.       <v-row>
  8.         <v-col
  9.           cols="12"
  10.           md="4"
  11.         >
  12.           <v-boilerplate
  13.             class="mb-6"
  14.             type="card-avatar, article, actions"
  15.           ></v-boilerplate>
  17.           <v-boilerplate type="date-picker"></v-boilerplate>
  18.         </v-col>
  20.         <v-col
  21.           cols="12"
  22.           md="4"
  23.         >
  24.           <v-boilerplate
  25.             class="mb-6"
  26.             type="article, actions"
  27.           ></v-boilerplate>
  29.           <v-boilerplate
  30.             class="mb-6"
  31.             type="table-heading, list-item-two-line, image, table-tfoot"
  32.           ></v-boilerplate>
  33.         </v-col>
  35.         <v-col
  36.           cols="12"
  37.           md="4"
  38.         >
  39.           <v-boilerplate
  40.             class="mb-6"
  41.             type="list-item-avatar, divider, list-item-three-line, card-heading, image, actions"
  42.           ></v-boilerplate>
  44.           <v-boilerplate type="list-item-avatar-three-line, image, article"></v-boilerplate>
  45.         </v-col>
  46.       </v-row>
  47.     </v-container>
  48.   </v-sheet>
  49. </template>
  1. <script>
  2.   export default {
  3.     // Vuetify components provide
  4.     // a theme variable that is
  5.     // used to determine dark
  6.     inject: ['theme'],
  8.     components: {
  9.       // Create a new component that
  10.       // extends v-skeleton-loader
  11.       VBoilerplate: {
  12.         functional: true,
  14.         render (h, { data, props, children }) {
  15.           return h('v-skeleton-loader', {
  16.             ...data,
  17.             props: {
  18.               boilerplate: true,
  19.               elevation: 2,
  20.               ...props,
  21.             },
  22.           }, children)
  23.         },
  24.       },
  25.     },
  26.   }
  27. </script>

Skeleton Loaders（骨架装载器） - 图4

实现方法

有两种方法可以使用 v-skeleton-component。default slot 或 v-if 条件。内建的插槽是最方便和最容易使用的，但是一旦渲染就会生成一个额外的 div。如果额外的 div 在您的设置中是一个问题，您可以使用一个 Vuetify transition component 或一个定制的 v-if 条件。

template script

  1. <template>
  2.   <v-container class="grey">
  3.     <div class="text-center d-flex justify-center align-center mb-12 flex-wrap">
  4.       <v-btn
  5.         class="mx-12 my-4"
  6.         @click="loading = !loading"
  7.       >
  8.         Toggle
  9.       </v-btn>
  11.       <v-select
  12.         v-model="transition"
  13.         label="Transition"
  14.         hide-details
  15.         :items="transitions"
  16.         style="max-width: 200px;"
  17.       ></v-select>
  18.     </div>
  20.     <v-row justify="center">
  21.       <v-col
  22.         class="text-center"
  23.         cols="12"
  24.       >
  25.         <div class="headline">Default Slot</div>
  26.       </v-col>
  28.       <v-col
  29.         class="mb-12"
  30.         cols="12"
  31.         md="4"
  32.       >
  33.         <v-skeleton-loader
  34.           :loading="loading"
  35.           :transition="transition"
  36.           height="94"
  37.           type="list-item-two-line"
  38.         >
  39.           <v-card>
  40.             <v-card-title>Title</v-card-title>
  41.             <v-card-text>Card Text</v-card-text>
  42.           </v-card>
  43.         </v-skeleton-loader>
  44.       </v-col>
  46.       <v-col
  47.         class="text-center"
  48.         cols="12"
  49.       >
  50.         <div class="headline">
  51.           If conditional<br>w/Transition Element
  52.         </div>
  53.       </v-col>
  55.       <v-col
  56.         cols="12"
  57.         md="4"
  58.       >
  59.         <component
  60.           :is="transition !== 'None' ? `v-${transition}` : 'div'"
  61.           hide-on-leave
  62.         >
  63.           <v-skeleton-loader
  64.             v-if="loading"
  65.             height="94"
  66.             type="list-item-two-line"
  67.           >
  68.           </v-skeleton-loader>
  70.           <v-card
  71.             v-else
  72.           >
  73.             <v-card-title>Title</v-card-title>
  74.             <v-card-text>Card Text</v-card-text>
  75.           </v-card>
  76.         </component>
  77.       </v-col>
  78.     </v-row>
  79.   </v-container>
  80. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       loading: true,
  5.       transition: 'scale-transition',
  6.       transitions: [
  7.         {
  8.           text: 'None',
  9.           value: undefined,
  10.         },
  11.         {
  12.           text: 'Fade Transition',
  13.           value: 'fade-transition',
  14.         },
  15.         {
  16.           text: 'Scale Transition',
  17.           value: 'scale-transition',
  18.         },
  19.       ],
  20.     }),
  21.   }
  22. </script>

Skeleton Loaders（骨架装载器） - 图5

无障碍

默认情况下，v-skeleton-loader 组件被分配给了 WAI-ARIA 角色 alert。我们用两个法属性来补充这个角色。aria-busy 的值 true 表示小部件缺少所需属元素。aria-live 的值polite 设置屏幕读者对实时区域的优先级。