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

Question

我有一个包含多行的 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)
    }
})

Answer 1

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

Answer 2

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

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

Escape key press not working with second modal window in vuejs

javascript

vue.js

vue-component

vuejs2

vue-directives