使用 vuetify 3 的对话框和覆盖大小

Question

这是我的对话代码：

<template>
  <div class="text-center">
    <v-dialog v-model="dialog" width="500">
      <template v-slot:activator="{ on, attrs }">
        <v-btn
          color="red lighten-2"
          dark
          v-bind="attrs"
          @click.stop="dialog = true">
          Click Me
        </v-btn>
      </template>

      <v-card>
        <v-card-title class="text-h5 grey lighten-2">
          Privacy Policy
        </v-card-title>

        <v-card-text>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </v-card-text>

        <v-divider></v-divider>

        <v-card-actions>
          <v-spacer></v-spacer>
          <v-btn
            color="primary"
            text
            @click="dialog = false"
          >
            I accept
          </v-btn>
        </v-card-actions>
      </v-card>
    </v-dialog>
  </div>
</template>

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

如您所见，对话框的宽度为 500 <v-dialog width="500">。这是我得到的结果：

如您所见，灰色覆盖宽度也是 500px。这个对吗？我预计灰色覆盖宽度为 100%，但 with=500px 的对话框将位于屏幕中央。是否可以使用 <v-dialog> 属性设置它们的大小，或者我应该修改 css 规则？

Answer 1

Vuetify 3 和 Vuetify 2 之间的对话框布局存在一些差异。下图取自其文档中的示例。

验证 2：

验证 3：

如您所见，在 Vuetify 2 中，overlay 是一个独立的元素，width: 500px 添加到对话框，而在 Vuetify 3 中，overlay 包含对话框内容，并且 width: 500px 添加到 overlay。这导致你得到的结果。我不确定它是否是预期的行为，因为 Vuetify 3 仍处于 alpha 版本，但现在，您可以通过将代码中的 width="500" 从 v-dialog 移动到 v-card 来获得预期结果.

Codepen

使用 vuetify 3 的对话框和覆盖大小

Dialog and overlay size with vuetify 3

javascript

css

typescript

vue.js

vuetify.js