Escape 按键不适用于 vuejs 中的第二个模态窗口

Question

我有一个包含多行的表格，每行都有一个按钮，单击按钮时，会打开一个包含表单元素的模式窗口。

提交表单后，第二个窗口打开确认，第一个窗口关闭。

以下代码是我的示例工作流程。

我的问题是

按 Escape 键时，在第一个窗口打开时有效，但在第二个窗口打开时无法关闭。

<template>
    <div>
        <table>
            <tr>
                <td>
                    <button @click="openFormWindow">Open form</button>
                </td>
            </tr>
        </table>
        <modal v-on-escape="hideFirstModal" v-if="isFirstWindowOpen">
            <div>
                <form @submit="submitFormOne">
                    <input type="text">
                    <button type="submit"></button>
                </form>
            </div>
        </modal>
        <modal v-on-escape="hideSecondModal" v-if="isSecondWindowOpen">
            <p>confirmation window</p>
        </modal>
    </div>
</template>

<script>
export default {
    data () {
        return {
            isFirstWindowOpen: false,
            isSecondWindowOpen: false
        }
    }
    methods: {
        openFormWindow () {
            // form window opens 
            this.isFirstWindowOpen = true
        },
        hideFirstModal () {
            this.isFirstWindowOpen = false
        },
        hideSecondModal () {
            this.isSecondWindowOpen = false
        },
        submitFormOne () {
            // submit the details, let the first window close & open the second window.
            this.isFirstWindowOpen = false
            this.isSecondWindowOpen = true
        }
    }
}
</script>

vue 指令on-escape

Vue.directive('on-escape', {
    bind (el, binding, vnode) {
        el.customEventKeydown = function (event) {
            // Check if click was outside the el and his childrens
            if (event.keyCode === 27) {
                vnode.context[binding.expression](event)
            }
        }
        document.body.addEventListener("keydown", el.customEventKeydown)
    },
    unbind (el) {
        document.body.removeEventListener("keydown", el.customEventKeydown)
    }
})

Answer 1

在每个 <modal> 组件上使用 key 告诉 Vue 不要重用 DOM 节点：

<modal v-on-escape="hideFirstModal" v-if="isFirstWindowOpen" key="modal1">

<modal v-on-escape="hideSecondModal" v-if="isSecondWindowOpen" key="modal2">

Vue 在创建第二个模式时重用了第一个模式的 DOM，因此从未创建第二个 keydown 事件侦听器。

当在 DOM 中添加和删除元素时，Vue 有时会尝试通过重用旧的 DOM 节点来加快渲染速度。有时这可能会产生不必要的副作用。 key 基本上指示它不要这样做。

Answer 2

您似乎缺少this.isSecondWindowOpen，它没有在您的数据函数中返回。