Vuetify v-dialog - 动态宽度

Question

是否可以使 v-dialog 具有动态宽度？当前，默认情况下 v-dialog 具有动态高度，这使其根据内容的长度缩短和延长。

但这可以用宽度来完成吗？

我有一个包含 4 个选项卡的 v 对话框。其中 3 个选项卡不需要太大的宽度，但最后一个选项卡包含一个表格，所以我希望对话框尽可能地加宽，以满足表格的需求，然后在单击第一个时再次缩短3 个标签。

Vuetify v-dialog：https ://vuetifyjs.com/en/components/dialogs

Answer 1

将宽度设置为“未设置”似乎有效，但尚未发现任何负面影响。

<v-dialog v-model="dialog" width="unset">
    <YourDialogContent></YourDialogContent>
</v-dialog>

或 CSS

.v-dialog {
    width: unset;
}

Answer 2

桌面版

所以我想对话扩大只要它需要，以配合表，然后第一个3个标签的每点击时再缩短。

对于桌面，我们可以v-dialog根据对话框内的内容轻松设置动态宽度，通过手动设置width="auto "（额外空间）。

<template>
  <v-dialog width="auto ">
    ...
  </v-dialog>
</template>

由于空间有限，全屏对话框可能比大屏幕设备上使用的对话框更适合移动设备。但只需要在移动设备中将对话框设置为全屏。我们可以使用 Vuetify断点轻松设置动态全屏，例如：

<template>
  <v-dialog :fullscreen="$vuetify.breakpoint.xsOnly">
    ...
  </v-dialog>
</template>

我们可以将这两种逻辑合二为一，例如：

<template>
  <v-dialog width="auto " :fullscreen="$vuetify.breakpoint.xsOnly">
    ...
  </v-dialog>
</template>

在桌面上

如果我们使用单击我按钮打开对话框，我们可以看到对话框的宽度很小，因为选项卡 1 和 2 的内容非常小。但是，如果我们单击具有大数据表的选项卡 3，您可以看到对话框的宽度和高度自动增加。您可以在选项卡之间切换，并可以再次看到这一点。

在移动

Answer 3

编写自定义 css 规则而不是 setwidth或max-widthprops。例如：

我使用自定义类以便不对所有应用规则v-dialog：

<v-dialog v-model="dialog" content-class="v-dialog--custom">
   <!-- dialog content -->
</v-dialog>

并创建您的自定义规则：

.v-dialog--custom {
  width: 100%;
}

/* Desktop */
@media screen and (min-width: 768px) {
  .v-dialog--custom {
    width: 50%;
  }
}

你可以在 codepen 上看到这个：https ://codepen.io/hans-felix/pen/BajByxx

Answer 4

您在谈论这部分吗？：

<v-dialog
    v-model="dialog"
    width="500"
>

如果是这样，为什么不把这个width="500"部件拆下来，直接留下呢？我测试过，它会动态拉伸。此选项不是必需的，如果删除它也不会造成任何破坏。

如果我误解了什么，请随时添加更多细节。