vue实现esc关闭div弹窗的自定义指令

最新推荐文章于 2025-03-31 08:45:15 发布

原创

最新推荐文章于 2025-03-31 08:45:15 发布 · 524 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #javascript #前端

弹窗是 div 实现的（非el-dialog）,效果：按下esc，关闭弹窗

directive/divEscClose/divEscClose.js

export default {
  bind: function (el, binding, vnode) {
    let keydownHandler;

    const closeModal = () => {
      if (typeof binding.value === 'function') {
        binding.value();
      }
    };

    keydownHandler = e => {
      if (e.key === 'Escape') {
        closeModal();
      }
    };

    document.addEventListener('keydown', keydownHandler);

    vnode.context.$once('hook:beforeDestroy', () => {
      document.removeEventListener('keydown', keydownHandler);
    });

    // 将事件处理器存储在指令的私有变量中
    el._keydownHandler = keydownHandler;
  },
  unbind: function (el) {
    // 从元素中获取并移除事件监听器
   &