Question

我正在尝试在Vuetify中显示v-skeleton-loader。我使用了v-if和v-else。如果未加载映像，则应显示骨架加载器。否则，它应该显示图像。这是我的代码：

<template>
   <v-col v-for="option in options" :key="option.id" cols="6">
       <v-lazy :options="{ threshold: 0.5 }" min-height="130">
           <v-hover v-slot:default="{ hover }">
               <v-card
                   link
                   width="160"
                   id="options_card"
               >
                      <v-sheet
                        class="px-3 pt-3 pb-3"
                        v-if="!images"
                      >
                         <v-skeleton-loader
                            max-width="300"
                            type="image"
                         ></v-skeleton-loader>
                      </v-sheet>
                      <v-img
                            width="100%"
                            height="130"
                            :src="option.thumbnail"
                            id="thumbnail"
                            v-else
                       ></v-img>
                  </v-card> 
              </v-hover>
           </v-lazy>
        </v-col>
 </template>

 <script>
 export default {
   data() {
     return {
        images: false
     }
   },

   mounted () {
     this.images = true
   },
 }
 </script>

但是在屏幕上看不到v-skeleton-loader。

Answer 1

VImage有一个placeholder slot，它将用于自定义要在加载图像时显示的加载器组件：

<v-img>
  <template v-slot:placeholder>
    <v-sheet>
      <v-skeleton-loader />
    </v-sheet>
  </template>
</v-img>

demo

Answer 2

<v-img>
  <template v-slot:placeholder>
    <v-sheet>
      <v-skeleton-loader />
    </v-sheet>
  </template>
</v-img>

如何在vuetify中的v-for内部制作v-skeleton-loader？

2 个答案: