Aquí está mi código de muestra. He agregado un v-dialog desde vuetify. Quiero que el fondo sea oscuro/negro o borroso cuando se abra el cuadro de diálogo v
<v-dialog v-model="logoutdialog" width="500" > <v-card> <v-card-title> <span>Logout</span> <v-spacer></v-spacer> <v-menu bottom left> <template v-slot:activator="{ on, attrs }"> <v-btn icon v-bind="attrs" v-on="on" @click="logoutdialog= false"> <v-icon>mdi-close</v-icon> </v-btn> </template> </v-menu> </v-card-title> <v-card-actions> <v-btn color="primary" text @click="logoutdialog = false"> Close </v-btn> </v-card-actions> </v-card> [![expected output][1]][1] </v-dialog>El siguiente adjunto es el código de muestra [1]: https://i.stack.imgur.com/oXD3f.jpg
Aquí hay algo que me funciona en vue2
<style> /* hide the "scrim", it's pointless */ .v-overlay--active .v-overlay__scrim { display: none; } /* style the overlay container as required */ .v-overlay--active { backdrop-filter: blur(2px); background: rgb(0 0 0 / 0.8); } /* if you have an auto dark theme for prefers-color-scheme: dark I find the 0.8 too dark */ @media (prefers-color-scheme: dark) { .v-overlay--active { background: rgb(0 0 0 / 0.4); } } </style>Puede hacer esto definiendo accesorios de superposición de color y superposición de opacidad para el componente v-dialog.
Documentación de la API: https://vuetifyjs.com/en/api/v-dialog/#props-overlay-color
Ejemplo: https://codesandbox.io/s/vuetify-playground-forked-t9zhps?file=/src/layout.vue:0-1695
<v-dialog v-model="logoutdialog" width="500" overlay-color="black" overlay-opacity="1" > // rest of the code </v-dialog>