Как перейти к слушателям vue-js-modal перед открытием и перед закрытием?

Для диалогового окна я использовал https://github.com/euvl/vue-js-modal. Мне нужно выполнить некоторый код после закрытия диалога, так как я могу передать слушателям перед открытием и перед закрытием в диалог?

Изменения:

Я добавил @before-open="beforeOpen" @before-close="beforeClose" к <v-dialog> и перечислил их в разделе методов, но все равно не работает

index.html

<!DOCTYPE html>
    <html lang="en">
    <head>
        <meta charset="utf-8">
        <title>{%=o.htmlWebpackPlugin.options.title || 'Undefended'%}</title>
    </head>
    <body>
    <div id="app">
        <form id="form2" v-on:submit.prevent="login">
            <input type="email" v-model="signIn.email" placeholder="[email protected]">
            <input type="password" v-model="signIn.password" placeholder="Password">
            <input type="submit" value="Sign In">
        </form>

        <v-dialog @before-open="beforeOpen" @before-close="beforeClose"/>
    </div>
    <script src="/dist/build.js"></script>
    </body>
    </html>

main.js укороченная версия

import VModal from 'vue-js-modal'

Vue.use(VModal, {dialog: true});
new Vue({
    el: '#app',
    data: {
        signIn: {
            email: '',
            password: ''
        },
    },

    methods: {
        beforeOpen: function () {
            console.log("open")
        },
        beforeClose: function () {
            console.log("close")
        },

        login: function () {
            fireAuth.signInWithEmailAndPassword(this.signIn.email, this.signIn.password)
                .then((user) => {
                    if (!user.emailVerified) {
                        //-------------dialog-------------//
                        this.$modal.show('dialog', {
                            title: 'Alert!',
                            text: 'Please verify your email',
                            buttons: [{
                                title: 'Send verification email',
                                handler: () => {}
                            }, {title: 'Close'}]
                        });
                        //-------------dialog-------------//
                    }
                })
        }

    },
});

в этом случае в консоль ничего не пишет


javascript vue.js vuejs2 vue-component
person Nodirbek    schedule 26.09.2017    source источник
comment
Пожалуйста, добавьте свой HTML-шаблон   -  person Quoc-Anh Nguyen    schedule 26.09.2017
comment
Я только что использовал ‹v-dialog/›, и он отлично работает   -  person Nodirbek    schedule 26.09.2017

Ответы (3)


arrow_upward
3
arrow_downward

Ответ @imcvampire идеален, но если у вас есть какие-то сомнения и вам нужен пример, вот он:

https://github.com/euvl/vue-js-modal/blob/master/demo/client_side_rendering/src/components/SizeModal.vue

В vue-js-modal.

person Kumar_14    schedule 26.09.2017

arrow_upward
2
arrow_downward

Спасибо за использование плагина.

v-dialog в настоящее время не поддерживает слушателей. Это очень тонкая оболочка для modal, больше похожая на пример. Я думаю, что решение вашей проблемы будет заключаться в том, чтобы просто использовать модальный режим со всеми его функциями.

person euvl    schedule 26.09.2017

arrow_upward
1
arrow_downward

Вы можете установить функцию в событии v-modal:

<v-dialog @before-open="beforeOpen" @before-close="beforeClose"/>

И вы определяете 2 метода:

methods: {
  beforeOpen() { console.log('open') },
  beforeClose() { console.log('close') }
}
person Quoc-Anh Nguyen    schedule 26.09.2017
comment
Хорошо, я написал это <v-dialog @before-open="beforeOpen" @before-close="beforeClose"/> и добавил methods:{ beforeOpen: function () { console.log("open") }, beforeClose: function () { console.log("close") },} к основному родительскому экземпляру Vue, однако ничего не произошло. - person Nodirbek; 26.09.2017
comment
Можете ли вы поделиться со мной своим полным кодом? Вы можете использовать jsfiddle! - person Quoc-Anh Nguyen; 26.09.2017
comment
-1: прослушиватели, такие как before-open и before-close, не поддерживаются для v-dialog! Они работают только с v-modal. ОП спрашивал о диалоге. - person 1_bug; 24.05.2019