VueStrap模态框按键事件失效：实现回车提交/ESC关闭需求

Hey there, let's break down why your custom keyHandler isn't triggering and get those keyboard shortcuts working smoothly for your VueStrap modal.

Why Your keyHandler Isn't Firing #

The issue here is that VueStrap's <modal-window> component handles keyboard events internally (like the ESC key for closing) and doesn't bubble the keyup event up to the component itself by default. So binding v-on:keyup directly to the <modal-window> won't catch those keyboard events as you expect.

Solution 1: Use VueStrap Modal's Built-in Features (Simplest Approach) #

VueStrap's modal already has built-in support for most of what you need—no custom key handler required:

• ESC to Close: The modal already supports this by default via the escape prop (it's set to true unless you override it). This will automatically trigger your cancel() or closed() methods when ESC is pressed.
• Enter to Submit: Add an autofocused confirmation button inside the modal. When the modal opens, the button will grab focus, so pressing Enter will trigger the button's click event (which ties to your submit() method).

Here's the updated code:

<template>
  <modal-window 
    v-model="show" 
    @ok="submit()" 
    @cancel="cancel()" 
    @closed="close()"
    :escape="true" <!-- Ensures ESC closes the modal (default is true, but explicit is safe) -->
  >
    <!-- Your modal content here -->
    
    <!-- Use slots for action buttons (VueStrap standard) -->
    <button slot="ok" autofocus @click="submit()">Confirm</button>
    <button slot="cancel" @click="cancel()">Cancel</button>
  </modal-window>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    submit() {
      // Your submit logic here
      console.log("Submitted!");
      this.show = false;
    },
    cancel() {
      // Your cancel logic here
      console.log("Cancelled!");
      this.show = false;
    },
    close() {
      // Post-close cleanup logic here
      console.log("Modal closed!");
    }
  }
};
</script>

Solution 2: Custom Global Keyboard Listener (For Advanced Logic) #

If you need more control over keyboard events (beyond the built-in features), you can add a global keyboard listener when the modal opens, and remove it when it closes to avoid memory leaks.

<template>
  <modal-window 
    v-model="show" 
    @ok="submit()" 
    @cancel="cancel()" 
    @opened="setupKeyboardListeners"
    @closed="cleanupKeyboardListeners"
  >
    <!-- Your modal content here -->
  </modal-window>
</template>

<script>
export default {
  data() {
    return {
      show: false
    };
  },
  methods: {
    submit() {
      console.log("Submitted via Enter!");
      this.show = false;
    },
    cancel() {
      console.log("Cancelled via ESC!");
      this.show = false;
    },
    keyHandler(event) {
      if (event.key === 'Enter') {
        this.submit();
      } else if (event.key === 'Escape') {
        this.cancel();
      }
    },
    setupKeyboardListeners() {
      // Add listener when modal opens
      document.addEventListener('keyup', this.keyHandler);
    },
    cleanupKeyboardListeners() {
      // Remove listener when modal closes to avoid memory leaks
      document.removeEventListener('keyup', this.keyHandler);
    }
  }
};
</script>

Key Notes #

• Always clean up global event listeners when they're no longer needed (like when the modal closes) to prevent memory leaks.
• Double-check VueStrap's modal props if you need to tweak behavior—props like escape (disable/enable ESC close) or backdrop (click outside to close) can save you from writing custom code.

内容的提问来源于stack exchange，提问作者Denis Stephanov