简单的问题:我想要一个 float 操作按钮位于对话框的右上角,溢出,因此它与对话框有一点偏移。 v-dialog 有 'overflow-y: hidden',无论我怎么尝试,我都无法覆盖它。
<v-dialog max-width="450">
<div style="width: 200px; heigth: 200px;" >
<v-btn fab absolute top right>
<v-icon>
mdi-close
</v-icon>
</v-btn>
</div>
</v-dialog>
我尝试将一些样式与 !important 一起使用:
.show-overflow {
overflow: visible !important;
}
我尝试在
中直接使用 'style="overflow: visible"'如果我关闭 overflow: hidden from the v-dialog using chrome's devtool 我得到了我想要的确切结果,但我没有找到任何方法。
谁有解决方案?
最佳答案
好的,所以我找到了执行此操作的方法。基本上,使用 Vue 的深层 CSS 选择器是执行此操作的正确方法。
只需按照我的组件的样式执行此操作:
<style scoped>
>>> .v-dialog {
overflow-y: visible;
}
</style>
“>>>”是关键,因为它“深度”覆盖了 .v-dialog 类的样式。在作用域样式中使用它使得它不会在其他地方破坏 v-dialog。
关于css - 覆盖 vuetify 对话框的溢出属性,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/65555975/