vuetify 3 不显示叠加层

Question

这是例子，取自vuetify sample

<template>
  <v-row
    align="center"
    justify="center"
  >
    <v-card
      height="300"
      width="250"
    >
      <v-row justify="center">
        <v-btn
          color="success"
          class="mt-12"
          @click="overlay = !overlay"
        >
          Show Overlay
        </v-btn>

        <v-overlay
          :absolute="absolute"
          :value="overlay"
        >
          <v-btn
            color="success"
            @click="overlay = false"
          >
            Hide Overlay
          </v-btn>
        </v-overlay>
      </v-row>
    </v-card>
  </v-row>
</template>

<script>
  export default {
    data: () => ({
      absolute: true,
      overlay: false,
    }),
  }
</script>

这是我得到的结果：

问题是当我点击按钮时，没有任何反应。因为我只是在学习 vue 和 vuetify，所以我不明白这个例子有什么问题。谁能帮帮我？

重要：vue 3、vuetify 3.0.0-alpha.7。

Answer 1

覆盖组件可能看起来与默认代码不太一样。它基本上只是在屏幕上附加了一个没有内容的黑色方块。因此，您的页面上可能发生了 CSS 冲突（当然除非控制台中出现错误）。

点击按钮时您希望看到什么？

编辑检查这个 CodePen 的工作示例： https://codepen.io/monty9120/pen/JjNoxOe?editors=101

    <div id="app">
  <v-app id="inspire">
    <v-row
      align="center"
      justify="center"
    >
      <v-card
        height="300"
        width="250"
      >
        <v-row justify="center">
          <v-btn
            color="success"
            class="mt-12"
            @click="overlay = !overlay"
          >
            Show Overlay
          </v-btn>
  
          <v-overlay
            :absolute="absolute"
            :value="overlay"
          >
            <v-btn
              color="success"
              @click="overlay = false"
            >
              Hide Overlay
            </v-btn>
          </v-overlay>
        </v-row>
      </v-card>
    </v-row>
  </v-app>
</div>

然后在脚本中：

new Vue({
  el: '#app',
  vuetify: new Vuetify(),
  data: () => ({
    absolute: true,
    overlay: false,
  }),
})

确保包含 CodePen 中的所有依赖项

Answer 2

您只需将 :value="overlay" 更改为 v-model="overlay"，如下所示：

<v-overlay
   :absolute="absolute"
   v-model="overlay"
>

修改后结果：

vuetify 3 不显示叠加层

Overlay is not shown with vuetify 3

javascript

typescript

vue.js

vuetify.js