v-dialog Vuetify 的自定义位置 [英] Custom postion for v-dialog Vuetify

问题描述

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

I need to open a v-dialog of certain width and height on right bottom side of my page, but, I can't understand how to do. V-dialog always are centered on the page, I searched on official doc, tried use CSS, but wasn't able any ideas?

推荐答案

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

Note: Other provided solutions are not satisfying because they mess up transitions, or we can't use scoped-styles, or they suggest using !important etc.

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

Add arbitrary content-class class to your dialog:

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

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

Then we can use scoped styles:

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

这篇关于v-dialog Vuetify 的自定义位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！