遮罩层

v-overlay 组件用于强调特定元素或其中的一部分。 它向用户发出应用程序内状态更改的信号，可用于创建加载程序，对话框等。

用例

以最简单的形式，v-overlay 组件将在您的应用程序上添加暗淡的图层。

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-btn
  4.       color="error"
  5.       @click="overlay = !overlay"
  6.     >
  7.       Show Overlay
  8.     </v-btn>
  10.     <v-overlay :value="overlay">
  11.       <v-btn
  12.         icon
  13.         @click="overlay = false"
  14.       >
  15.         <v-icon>mdi-close</v-icon>
  16.       </v-btn>
  17.     </v-overlay>
  18.   </div>
  19. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       overlay: false,
  5.     }),
  6.   }
  7. </script>

Overlays（遮罩层） - 图1

API

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

Overlays（遮罩层） - 图2

实战场

template script

  1. <template>
  2.   <v-row justify="center">
  3.     <v-col cols="12">
  4.       <v-row align="center">
  5.         <v-btn
  6.           class="mt-12"
  7.           color="primary"
  8.           @click="overlay = !overlay"
  9.         >
  10.           Show Overlay
  11.         </v-btn>
  13.         <v-overlay
  14.           :absolute="absolute"
  15.           :opacity="opacity"
  16.           :value="overlay"
  17.           :z-index="zIndex"
  18.         >
  19.           <v-btn
  20.             color="primary"
  21.             @click="overlay = false"
  22.           >
  23.             Hide Overlay
  24.           </v-btn>
  25.         </v-overlay>
  26.       </v-row>
  27.     </v-col>
  29.     <v-row justify="center">
  30.       <v-radio-group row>
  31.         <v-checkbox
  32.           v-model="absolute"
  33.           label="Absolute"
  34.         ></v-checkbox>
  35.         <v-checkbox
  36.           v-model="overlay"
  37.           class="mx-6"
  38.           label="value"
  39.         ></v-checkbox>
  40.         <v-text-field
  41.           v-model="opacity"
  42.           label="Opacity"
  43.           max="1"
  44.           min="0"
  45.           step=".01"
  46.           style="width: 125px"
  47.           type="number"
  48.           @keydown="false"
  49.         ></v-text-field>
  50.         <v-text-field
  51.           v-model="zIndex"
  52.           label="z-index"
  53.           max="9999"
  54.           min="-9999"
  55.           step="1"
  56.           style="width: 125px"
  57.           type="number"
  58.           @keydown="false"
  59.         ></v-text-field>
  60.       </v-radio-group>
  61.     </v-row>
  62.   </v-row>
  63. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       absolute: false,
  5.       opacity: 0.46,
  6.       overlay: false,
  7.       zIndex: 5,
  8.     }),
  9.   }
  10. </script>

Overlays（遮罩层） - 图3

示例

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

绝对定位

absolute 遮罩层被放置在绝对位置，并包含在父元素中。

template script

  1. <template>
  2.   <v-row align="center" justify="center">
  3.     <v-card height="300" width="250">
  4.       <v-row justify="center">
  5.         <v-btn
  6.           color="success"
  7.           class="mt-12"
  8.           @click="overlay = !overlay"
  9.         >
  10.           Show Overlay
  11.         </v-btn>
  13.         <v-overlay
  14.           :absolute="absolute"
  15.           :value="overlay"
  16.         >
  17.           <v-btn
  18.             color="success"
  19.             @click="overlay = false"
  20.           >
  21.             Hide Overlay
  22.           </v-btn>
  23.         </v-overlay>
  24.       </v-row>
  25.     </v-card>
  26.   </v-row>
  27. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       absolute: true,
  5.       overlay: false,
  6.     }),
  7.   }
  8. </script>

Overlays（遮罩层） - 图4

透明度

opacity 允许您自定义 v-overlay 组件的透明度。

template script

  1. <template>
  2.   <v-row align="center" justify="center">
  3.     <v-card height="300" width="250">
  4.       <v-row justify="center">
  5.         <v-btn
  6.           color="orange lighten-2"
  7.           class="mt-12"
  8.           @click="overlay = !overlay"
  9.         >
  10.           Show Overlay
  11.         </v-btn>
  13.         <v-overlay
  14.           :absolute="absolute"
  15.           :opacity="opacity"
  16.           :value="overlay"
  17.         >
  18.           <v-btn
  19.             color="orange lighten-2"
  20.             @click="overlay = false"
  21.           >
  22.             Hide Overlay
  23.           </v-btn>
  24.         </v-overlay>
  25.       </v-row>
  26.     </v-card>
  27.   </v-row>
  28. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       absolute: true,
  5.       opacity: 1,
  6.       overlay: false,
  7.     }),
  8.   }
  9. </script>

Overlays（遮罩层） - 图5

Z 索引

使用 z-index 可以轻松更改 v-overlay 组件的堆栈顺序。

template script

  1. <template>
  2.   <v-row justify="center">
  3.     <v-btn
  4.       class="white--text"
  5.       color="teal"
  6.       @click="overlay = !overlay"
  7.     >
  8.       Show Overlay
  9.     </v-btn>
  11.     <v-overlay
  12.       :z-index="zIndex"
  13.       :value="overlay"
  14.     >
  15.       <v-btn
  16.         class="white--text"
  17.         color="teal"
  18.         @click="overlay = false"
  19.       >
  20.         Hide Overlay
  21.       </v-btn>
  22.     </v-overlay>
  23.   </v-row>
  24. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       overlay: false,
  5.       zIndex: 0,
  6.     }),
  7.   }
  8. </script>

Overlays（遮罩层） - 图6

Charcoal Vuetify Beanie

Stay warm with the new Premium Knit Vuetify Beanie available in black, navy and charcoal.

ads by Vuetify

](https://store.vuetifyjs.com/product/premium-charcoal-vuetify-beanie?ref=vuetifyjs.com)

加载器

使用 v-overlay 作为背景，添加进度组件来轻松创建自定义加载器。

template script

  1. <template>
  2.   <div class="text-center">
  3.     <v-btn
  4.       color="deep-purple accent-4"
  5.       class="white--text"
  6.       @click="overlay = !overlay"
  7.     >
  8.       Launch Application
  9.       <v-icon right>mdi-open-in-new</v-icon>
  10.     </v-btn>
  12.     <v-overlay :value="overlay">
  13.       <v-progress-circular indeterminate size="64"></v-progress-circular>
  14.     </v-overlay>
  15.   </div>
  16. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       overlay: false,
  5.     }),
  7.     watch: {
  8.       overlay (val) {
  9.         val && setTimeout(() => {
  10.           this.overlay = false
  11.         }, 3000)
  12.       },
  13.     },
  14.   }
  15. </script>

Overlays（遮罩层） - 图7

高级版

使用 v-hover，我们可以在信息卡上添加漂亮的稀松布，以及用户可以执行的其他操作。

template script

  1. <template>
  2.   <v-hover>
  3.     <template v-slot:default="{ hover }">
  4.       <v-card
  5.         class="mx-auto"
  6.         max-width="344"
  7.       >
  8.         <v-img src="https://cdn.vuetifyjs.com/images/cards/forest-art.jpg"></v-img>
  10.         <v-card-text>
  11.           <h2 class="title primary--text">Magento Forests</h2>
  12.           Travel to the best outdoor experience on planet Earth. A vacation you will never forget!
  13.         </v-card-text>
  15.         <v-card-title>
  16.           <v-rating
  17.             :value="4"
  18.             dense
  19.             color="orange"
  20.             background-color="orange"
  21.             hover
  22.             class="mr-2"
  23.           ></v-rating>
  24.           <span class="primary--text subtitle-2">64 Reviews</span>
  25.         </v-card-title>
  27.         <v-fade-transition>
  28.           <v-overlay
  29.             v-if="hover"
  30.             absolute
  31.             color="#036358"
  32.           >
  33.             <v-btn>See more info</v-btn>
  34.           </v-overlay>
  35.         </v-fade-transition>
  36.       </v-card>
  37.     </template>
  38.   </v-hover>
  39. </template>
  1. <script>
  2.   export default {
  3.     data: () => ({
  4.       overlay: false,
  5.     }),
  6.   }
  7. </script>

Overlays（遮罩层） - 图8