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

Escape key press not working with second modal window in vuejs

我有一个包含多行的 table,每行都有一个按钮,单击该按钮时,模态 window 打开包含表单元素。

提交表单后,第二个 window 打开进行确认,第一个 window 关闭。

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

我的问题是

在 Escape 键按下时,在第一个 window 打开时有效,但在打开第二个 window 时无法关闭它。

<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)
    }
})

您似乎遗漏了 this.isSecondWindowOpen,它没有在您的数据函数中返回。

在每个 <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 本质上指示它不要这样做。