vuetify 3未显示叠加

bt1cpqcv 于 2022-12-23 发布在 Vue.js

关注(0)|答案(2)|浏览(186)

这是取自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，所以我不明白这个例子有什么问题。有人能帮助我吗？
重要提示：版本3，验证3.0.0-α 7。

vue.js

来源：https://stackoverflow.com/questions/68196577/overlay-is-not-shown-with-vuetify-3

2条答案

按热度按时间

6yt4nkrj1#

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

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

变更后结果：

赞(0）回复(0）举报 2022-12-23

iklwldmw2#

覆盖组件可能看起来和默认代码不太一样。它基本上只是在屏幕上附加了一个没有内容的黑色方块。所以可能在你的页面上发生了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中的所有依赖项

赞(0）回复(0）举报 2022-12-23

我来回答

vuetify 3未显示叠加

2条答案

相关问题

热门标签

最新问答