Vuetify v-dialog - 动态宽度

Question

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

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

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

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

原文由 Dally 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

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

将 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>

原文由 Anees Hameed 发布，翻译遵循 CC BY-SA 4.0 许可协议