Vuetify 对话框：是否有 "small" & "large" 相当于 Bootstrap 对话框？

Question

我正在学习 Vuetify，来自 Bootstrap。我开始对话并让它们很好地工作。

然而，在文档中，它说 width 或 max-width 道具也采用字符串。

我试过了，似乎 css 宽度测量有效：数字 (px) 和百分比都有效。没有走得更远，因为我停在了我从 Bootstrap 习惯的逻辑“测量”：我想将对话框设置为“小”或“大”，如 Bootstrap.

我发现 width 也将“未设置”作为参数，但我找不到任何关于它使用的其他常量的文档。

那么，有没有“大”、“小”的等价物？或显示可能性的文档？

Answer 1

在 vuetify v-dialog 组件中，没有“大”和“小”的直接类似物。但是你可以简单地自己做。

例如，您可以创建一些全局变量：

Vue.prototype.$dialogSmall = 300;
Vue.prototype.$dialogLarge = 800;

Ant 然后在您的 v-dialog 组件中使用它：

<v-dialog
  v-model="dialog"
  :width="$dialogSmall"
  :max-width="$dialogSmall"
>
  ...
</v-dialog>

检查this Codesandbox我做的演示。

你对width和max-width的文档也有一些疑惑。因此，让我们检查来源！

看看VDialog.ts。您可以看到一些 convertToUnit 函数在创建组件时应用于 width 和 max-width 属性。

然后看看 convertToUnit 定义在 helpers.ts. There's no magic here. It just applies Numbers like 500 or Strings like "500" (that is converted to "500px"), "700px", "100%", ... . You can also put any of special CSS keywords that are allowed for width/max-width CSS property. They are listed here at MDN.

Vuetify 对话框：是否有 "small" & "large" 相当于 Bootstrap 对话框？

Vuetify dialog: Is there a "small" & "large" equivalent of Bootstrap dialog?

vuetify.js