Question

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

但是可以用宽度吗？

我有一个v对话框，其中包含4个标签。这些选项卡中的3个不需要太多宽度，但是最后一个选项卡包含一个表，因此我希望对话框根据需要扩展至最大程度，以适应该表，然后在单击第一个选项卡时再次将其缩短3个标签。

验证v对话：https://vuetifyjs.com/en/components/dialogs

Answer 1

对于台式机

因此，我希望对话框扩大所需范围，以适应表格，然后在单击前三个选项卡中的任何一个时再次缩短。

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

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

移动版

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

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

最终版本

我们可以将两种逻辑组合成一个逻辑：

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

Working Demo | Code Pen

在台式机上

如果使用“单击我”按钮打开对话框，则可以看到对话框的宽度很小，因为选项卡1和2的内容很小。但是，如果我们单击选项卡3，它的数据表很大，则可以看到对话框的宽度和高度自动增加。您可以在标签之间切换，然后可以再次看到。

在移动设备上

如果您在移动设备上打开此演示，则可以看到默认情况下该对话框以全屏方式打开，并且宽度是恒定的。

Answer 2

编写自定义CSS规则，而不设置width或max-width道具。例如：

我使用自定义类是为了不将规则应用于所有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 3

我认为，您要搜索的是全屏（布尔）属性，或者根据需要选择最大宽度（数字）属性。

通过设置其中之一，您可以根据周围的元素来控制v对话框的宽度。周围元素的宽度可以通过CSS调整，例如flexbox。

Answer 4

您在谈论这部分吗？：

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

如果是这样，为什么不删除width="500"部分而不留下一个部分呢？我进行了测试，它可以动态扩展。此选项不是必需的，如果将其删除，则不会有任何损坏。

万一我误解了，请随时添加更多细节。

Answer 5

将width设置为“ unset”似乎可行，但尚未发现任何负面影响。

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

或CSS

.v-dialog {
    width: unset;
}

Answer 6

使用科学家正在使用的东西。

将 width 作为计算变量，然后根据断点返回您的值。如果您想根据对话框中的内容动态设置宽度，则只需修改宽度函数以根据内容返回 width。从 vuetify 网站复制：LINK

<v-dialog v-model="dialog" :width="width">
  <v-img src="~~~"></v-img>
</v-dialog>
<script>
  ...
  computed:{
    width() {
      switch (this.$vuetify.breakpoint.name) {
        case 'xs': return 220
        case 'sm': return 400
        case 'md': return 500
        case 'lg': return 600
        case 'xl': return 800
      }
    },
  }
</script>

Vuetify v-dialog-动态宽度

6 个答案:

对于台式机

移动版

最终版本