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
>
...
Related
I'm trying to write test for my component and in this component i have a <V-MENU> and when it's activated, I'll get a form inside that component and in this form there's a <V-BTN>. so i managed to reach to buttons or items outside this menu but when i try to find my button inside menu, test will fail.
Basic Vue Component :
<v-btn
data-testid="working-button"
#click="workingbutton()"
>
Working Button
</v-btn>
<v-menu
v-model="menu"
data-testid="isMenu"
:close-on-content-click="false"
:nudge-width="200"
offset-x
>
<v-btn
data-testid="btn-one"
#click="doSomething"
>
BTN 1
</v-btn>
<v-card data-testid="card-test">
<v-text-field
v-model="country"
outlined
label="Email"/>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn
data-testid="btn-two"
#click="doSomething"
>
{{ login ? 'Login' : 'Register' }}
</v-btn>
</v-card-actions>
</v-card>
</v-menu>
Test Unit :
const wrapper = mount(TestComponent, {
store,
localVue,
vuetify
})
// Passed
expect(wrapper.vm.menu).toBe(false);
expect(wrapper.find('[data-testid="working-button"]').exists()).toBe(true);
expect(wrapper.find('[data-testid="isMenu"]').exists()).toBe(true);
const menuButton = wrapper.find('[data-testid="working-button"]')
menuButton.vm.$emit('click')
expect(wrapper.vm.menu).toBe(true);
// Will Fail
expect(wrapper.find('[data-testid="btn-one"]').exists()).toBe(true);
// Will Fail
expect(wrapper.find('[data-testid="card-test"]').exists()).toBe(true);
// Will Fail
expect(wrapper.find('[data-testid="btn-two"]').exists()).toBe(true);
Above codes are a basic example which I've tried to make it short in order to don't waste your time in reading it.
So as you can see in top I've triggered Working button to set menu to true, then tried to find the button, and the reason that I've did this was that, i thought maybe menu should be true, but it wasn't and it's still fail.
Like most components that create popups or overlays, the content of Vuetify's v-menu isn't rendered within the component itself, but at the point specified in its attach property, by default the root of your Vue app.
You will have to look outside your wrapper for the rendered menu. This should do it, assuming you have createWrapper imported from vue-test-utils:
const menu = createWrapper(document.body).find('.v-menu__content');
(You could also pass the specific element that is your app root instead of document.body to be more precise.) Then you would look for everything within the menu on the menu wrapper instead of the wrapper wrapper.
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>
A Vuetify question. Something has just started appearing in my app. On several views/components, I have a v-dialog. Up until a short while ago, the dialog would open correctly but as it was often taller than the screen I could comfortably scroll. Now the dialog seems to have taken control in the respect that I cannot scroll at all when a dialog is open.
This won’t scroll, so I can’t move to the bottom of the dialog. As I said, this is a “new” thing:
What I did, maybe this helps. I put a vue-youtube inside a new component (which is in a v-dialog), I was not happy with exactly where it was, I wanted it higher on the screen so I did the following:
<style scoped>
.v-dialog {
position: absolute;
top: 10%;
}
</style>
However, I initially forgot to use scoped. Not sure if this is the cause but all my dialogs have been affected.
What you need is a scrollable dialog, Please check the link https://vuetifyjs.com/en/components/dialogs/#scrollable
<v-dialog v-model="dialog" scrollable>
<v-card class="pa-3">
<v-card-text>
<v-form>
<!-- Add your form here -->
</v-form>
</v-card-text>
</v-card>
</v-dialog>
By default, Vuetify's v-btn has a "selected state", which from what I can tell, is just a darkened background. I'm using a few v-btns in a v-app-bar. One of these buttons is a Home button. When the vue app is launched (i.e. main route), I want to set the Home button as selected so that the user knows that this is the home page. Is there a simple way that I can do this from the template that I have my v-app-bar in?
<template>
<v-app-bar app fixed>
<router-link to="/">
<v-img src="/assets/my-logo.png" to="/home" class="mx-2" max-height="128" max-width="128" contain/>
</router-link>
<v-btn to="/home" tile>Home</v-btn>
<v-btn to="/another-view" tile>Another View</v-btn>
<v-btn to="/yet-another-view" tile>Yet Another View</v-btn>
</v-app-bar>
</template>
So given the markup above, how can I set the Home button as "active" or "selected" when the page opens up at the default route?
In the v-btn documentation, there's a prop called "input-value" which says that it controls the button's active state. The problem is that its type is "Any", so I'm not sure how to use it (and the documentation doesn't show anything about it). I tried setting to true/false and nothing changes.
Also, if I want to just get rid of all the buttons active states, how do I do that?
Why isn't there a simple solution like focused="true|false"?
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.