Menu
I have a vuetiful component which should just display a dialog. Unfortunately, an evil overlay has taken over the domverse. How do I overcome the forces of semi-transparent darkness?
Vue.component('step-form', {
data: function() {
return {
dialog: false
}
},
methods: {
showDialog() {
this.dialog=!this.dialog;
}
},
template: `
<v-dialog v-model="dialog" persistent max-width="600px">
Help, I'm hidden behind this evil "overlay"!
</v-dialog>
`
});
https://codepen.io/anon/pen/jJpWGx
355
By default, dialog can be closed by pressing Esc key and clicking the close icon on the right of dialog header.
No, you can't run Vuetify without Vue. The reason is pretty simple, most of Vuetify is built with vue and most of those components require their script to run, so everything that's not entirely css based will not work.
There are 2 primary layout components in Vuetify, v-app and v-main . The v-app component is the root of your application and a direct replacement for the default Vue entrypoint, <div id="app"> . The v-main component is a semantic replacement for the main HTML element and the root of your application's content.
Customizing. By default, Vuetify has a standard theme applied for all components. This can be easily changed. Simply pass a theme property to the Vuetify constructor.
It's not.
You simply don't have background color inside v-dialog. You can put v-card inside for example.
You just used persistent property which makes you unable to close it on-overlay-click, and have no other means to close it.
So dialog has z-index: 202, and overlay has 201 apparently, so dialog is above overlay,
but box-shadow makes it look like like it's floating behind it or something, but it's because it's transparent, and you just need to set background-color.
63
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
