Vuetify v-dialog - 动态宽度答案

【问题标题】：Vuetify v-dialog - Dynamic widthVuetify v-dialog - 动态宽度
【发布时间】：2019-07-31 19:34:16
【问题描述】：

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

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

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

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

【问题讨论】：

你能为此创建一个codepen吗？您可以尝试使用最大和最小宽度，或者尝试使用填充但没有您的代码我无法判断

标签： css vue.js vuetify.js

【解决方案1】：

你是在说这部分吗？：

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

如果是这样，为什么不删除width="500" 部分而一无所有？我测试过，它动态伸展。此选项不是必需的，如果您删除它，也不会破坏任何内容。

如果我误解了某些内容，请随时添加更多详细信息。

【讨论】：

没错，但如果我删除宽度，那么对话框会拉伸整个屏幕。

【解决方案2】：

我认为，您要搜索的是 fullscreen (bool) 属性或根据需要 max-width (Number) 属性。

通过设置其中之一，您可以根据周围元素控制 v-dialog 的宽度。可以通过 css 调整周围元素的宽度，例如弹性盒。

【讨论】：

目前我将 max-width 设置为 900px 以适应表格，但是当打开另一个表格时，对话框不会调整并变窄。它一直固定在 900 像素。

【解决方案3】：

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

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

或 CSS

.v-dialog {
    width: unset;
}

【讨论】：

这就是我一直在寻找的，因为根本没有设置任何宽度会自动将我的对话框拉伸到全屏宽度。谢谢！

【解决方案4】：

编写自定义 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

【讨论】：

你是如何计算出桌面屏幕应该是 768px 或更大的？

【解决方案5】：

桌面版

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

对于桌面，我们可以很容易地根据对话框内的内容为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，它有一个大的数据表，你可以看到对话框的宽度和高度自动增加。您可以在选项卡之间切换并再次看到此内容。

在移动设备上

如果你在手机上打开这个demo，你可以看到对话框默认全屏打开，宽度不变。

【讨论】：

虽然这个解决方案有效，但我建议不要使用它。 vuetify 不支持宽度值“auto”，它只是一个无效值。您甚至可以使用 width="asdf" 并且行为会 - 无意中 - 相同。因此，无法保证您的代码将在未来的 vuetify 版本中继续工作。

【解决方案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>

【讨论】：