如何在打开和关闭监听器之前传递给 vue-js-modal 对话框？答案

【问题标题】：How to pass to vue-js-modal dialog beforeOpen and beforeClose listeners?如何在打开和关闭监听器之前传递给 vue-js-modal 对话框？
【发布时间】：2017-09-26 03:01:59
【问题描述】：

对于对话窗口，我使用了https://github.com/euvl/vue-js-modal。我需要在关闭对话框后执行一些代码，那么如何将 beforeOpen 和 beforeClose 监听器传递给对话框？

变化：

我将 @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@email.com">
            <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-------------//
                    }
                })
        }

    },
});

在这种情况下，没有任何内容写入控制台

【问题讨论】：

请添加您的 HTML 模板
我刚用过效果很好

标签： javascript vue.js vuejs2 vue-component

【解决方案1】：

@imcvampire 的答案是完美的，但如果您有任何疑问并想在这里举个例子，那就是：

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

在 vue-js-modal 中。

【讨论】：

【解决方案2】：

感谢您使用插件。

v-dialog 目前不支持监听器。它是modal 的一个非常薄的包装器，更像是一个例子。我认为您的问题的解决方案将直接使用 modal 及其所有功能。

【讨论】：

【解决方案3】：

您可以在v-modal事件中设置函数：

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

你定义了 2 个方法：

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

【讨论】：

好的，我写了这个 <v-dialog @before-open="beforeOpen" @before-close="beforeClose"/> 并将 methods:{ beforeOpen: function () { console.log("open") }, beforeClose: function () { console.log("close") },} 添加到主父 Vue 实例，但是什么也没发生
你能分享我你的完整代码吗？你可以使用jsfiddle！
-1：v-dialog 不支持像 before-open 和 before-close 这样的监听器！它们仅适用于 v-modal。 OP 在询问对话。