In my laravel 5.6/vue.js 2.5.7 / vuetify": "^1.0.8" application I use
dialogs as written here https://vuetifyjs.com/en/components/dialogs
I wonder if there is a way to close the dialog by clicking cancel key?
MODIFIED :
As that is vuetify, my dialog definition looks like :
<v-footer app>
<v-dialog scrollable v-model="new_registered_users_dialog_visible" #keyup.esc="new_registered_users_dialog_visible=false">
<v-card>
and inserting keyup event as above has no effect
I tried to insert alert code in event:
<v-footer app>
<v-dialog scrollable v-model="new_registered_users_dialog_visible" #keyup.esc="alert(-1);new_registered_users_dialog_visible=false">
<v-card>
also no alerts
Which is the right way ?
Thanks!
I hope this should work for you:
<v-dialog #keydown.esc="new_registered_users_dialog_visible = false">
You can check this link here that discusses the same use case as yours.
Related
I wanted to make a custom button that basically when clicked on would make a v-data-table pop out below it. I am basically making a data table show up when a button is clicked and using this transition
https://vuetifyjs.com/en/styles/transitions/#scale
But the transition sort of makes the table go to the right more and also has an active state with a background with opacity, basically there is a lot of built in styles that are making it hard to make a table drop down below the button as the default behavior is when you click on the transition, the item that pops up covers the button.
Below is the code that causes this
<v-menu transition="scroll-y-transition" class="scroll-button">
<template v-slot:activator="{ on, attrs }">
<v-btn v-bind="attrs" v-on="on">
Scrolling Y Transition
</v-btn>
</template>
<v-data-table> </v-data-table>
</v-menu>
Is there a better way to implement this?
I don't recommend using menu. Maybe you are looking for this kind of animation.
<v-btn #click="show = !show">
{{ show ? 'Hide' ? 'Show' }}
</v-btn>
<v-expand-transition>
<div v-show="show">
<v-table></v-table>
</div>
</v-expand-transition>
And in the script
data() {
return {
show: false
}
}
You should use the native props for v-menu to reposition the menu how you like. See this snippet: https://codepen.io/bgtor/pen/BaWdBMO .
Note the use of offset-y which allow you to offset the menu on the Y axis, and bottom which tell it to offset to the bottom. Also, nudge-left="200px" is translating the menu to the left by "200px". You can find more props for customisation on the vuetify site: https://vuetifyjs.com/en/api/v-menu/.
Other than that, I agree with #scar-2018, it seems odd to display a table in a menu.
I'm new to vuetify and as far as I know, there is no way [for now] to destroy the body of dialog when the user closes it.
Does anybody have an idea about it?
For forms we can make field values equal to null or smth else but what about other components.
You can simply add a v-if to the v-dialog. This will get it removed completely from the DOM (destroyed) when closed.
<v-btn #click="showDialog = true">Show Dialog</v-btn>
<v-dialog v-if="showDialog" v-model="showDialog">
<v-card>
Hello World
</v-card>
</v-dialog>
I am using the v-dialog component from vuetify with the persistent tag currently in my project.
<v-dialog hide-overlay persistent>
<v-card></v-card>
</v-dialog>
Now, persistent prevents the user from closing the dialog by clicking outside. However, there is an bounce off effect when the user clicks outside. I would like to disable this bounce off effect.
You could use no-click-animation prop :
<v-dialog
v-model="dialog"
persistent
max-width="290"
no-click-animation
>
...
I am using vuetify
and I just wanna add an icon over the button of v-switch,
I searched in slots and found nothing
<v-switch label="Dark mode" flat inset></v-switch>
I wanna do like this picture
You can use v-checkbox, with off-icon and on-icon.
As example:
<v-checkbox class="pt-3"
v-model="$vuetify.theme.dark"
color="purple"
off-icon="mdi-theme-light-dark"
on-icon="mdi-theme-light-dark"
></v-checkbox>
Reference at https://vuetifyjs.com/en/api/v-checkbox/#props
far you can do is append-icon and/or prepend-icon props
you can check the detail at https://vuetifyjs.com/en/api/v-switch/#props
How can I check and handle the click event of a v-menu in Vuetify?
The best way is to use v-model on v-menu & watch to variable change.
HTML
<v-menu
v-model="isOpened">
</v-menu>
SCRIPT
export default({
watch:{
isOpened: function(){
// do whatever you want
}
}
})
Here is an example:
<template v-slot:activator="{ on: { click } }">
<v-btn #click="(click) (exit=!exit)" icon>
<v-icon v-if="!exit">mdi-dots-vertical</v-icon>
<v-icon v-else>mdi-close</v-icon>
</v-btn>
</template>
As you can see, if the menu is clicked the exit var is set to its opposite value and therefore the mdi-close icon is shown on the button. If the menu is clicked again, the event changing the exit variable will trigger again and the vertical dots will be shown.
I only posted this question to save the exact syntax for myself for later because I have been digging Vuetify docs for hours and finally figured out how to do it.