v-dialog Vuetify 的自定义位置答案

【问题标题】：Custom postion for v-dialog Vuetifyv-dialog Vuetify 的自定义位置
【发布时间】：2019-04-24 05:24:28
【问题描述】：

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

【问题讨论】：

【解决方案1】：

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

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

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

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

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

【讨论】：

像魅力一样工作！请问一下>>>是什么意思？你为什么用conetent-class而不是class？
@user2495085 >>> 是 deep selectors（在此处阅读它们：vue-loader.vuejs.org/guide/scoped-css.html#deep-selectors）。我们使用 content-class 而不是 class 以便我们的样式正确附加到对话框，因为这就是 v-dialog 组件的工作方式（在此处阅读更多信息，并查看链接文档：stackoverflow.com/questions/54720069/…）
感谢 Traxo，非常感谢您的解释！

【解决方案2】：

This feature is being looked at 但现在您可以自己编辑 CSS 类。例如，要让它显示在右下角，请使用：

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

【讨论】：

【解决方案3】：

style="position: absolute; bottom: 0;"

在 v-dialog 内的第一个 v-card 上

【讨论】：

【解决方案4】：

将此添加到您的样式中：

.v-dialog:not(.v-dialog--fullscreen) {
    bottom: 0 !important;
    right: 0 !important;
    position: absolute !important;
}

【讨论】：

【解决方案5】：

对于刚接触这篇文章的任何人，值得一试VBottomSheet 以了解此功能。

【讨论】：

【解决方案6】：

来到此页面寻找答案，但上述建议均不适用于 Vuetiful 2.2.11。最终这样做了：

.v-dialog__content {
  align-items: flex-end;
  justify-content: flex-end;
}

【讨论】：