v-dialog Vuetify 的自定义位置

Question

我需要在页面的右下角打开一个特定宽度和高度的 v 对话框，但是，我不明白该怎么做。V-dialog 总是以页面为中心，我搜索了官方文档，尝试使用 CSS，但没有任何想法？

Answer 1

注意：其他提供的解决方案并不令人满意，因为它们搞乱了转换，或者我们不能使用作用域样式，或者他们建议使用!important等。

解决方案

将任意content-class类添加到您的对话框中：

<v-dialog content-class="my-custom-dialog">

然后我们可以使用作用域样式：

<style scoped>
  >>> .my-custom-dialog {
    align-self: flex-end;
  }
</style>

Answer 2

该功能正在研究中，但现在您可以自己编辑 CSS 类。例如，要使其显示在右下角，请使用：

.v-dialog {
    position: absolute;
    bottom: 0;
    right: 0;
}