如何在多个Vue组件中复用v-dialog的原生事件监听关闭逻辑？

你当前的实现有两个明显问题：一是unmounted里的事件移除根本没生效（removeEventListener必须传入和添加时完全相同的函数引用），二是全局获取遮罩层的方式在多对话框场景下会出错。要复用这个逻辑，推荐两种方案：

方案一：使用Vue混入（Mixin） #

把关闭逻辑抽成可复用的mixin，直接在需要的组件中引入即可：

// dialogCloseMixin.js
export default {
  methods: {
    closeDialog() {
      this.$emit('input')
    },
    handleEscapeKey(evt) {
      if (evt.key === 'Escape') {
        this.closeDialog()
      }
    },
    handleScrimDblclick(e) {
      // 优化：通过当前激活的对话框获取对应遮罩层，避免全局冲突
      const scrim = document.querySelector('.v-dialog--active .v-overlay__scrim')
      if (e.target === scrim) {
        this.closeDialog()
      }
    }
  },
  mounted() {
    // 把函数存到实例上，方便销毁时移除
    this._keyupHandler = this.handleEscapeKey.bind(this)
    this._dblclickHandler = this.handleScrimDblclick.bind(this)
    
    document.addEventListener('keyup', this._keyupHandler)
    document.addEventListener('dblclick', this._dblclickHandler)
  },
  unmounted() {
    // 传入对应函数引用，才能正确移除事件
    document.removeEventListener('keyup', this._keyupHandler)
    document.removeEventListener('dblclick', this._dblclickHandler)
  }
}

在组件中使用：

<template>
  <v-container>
    <v-dialog :value="value" max-width="55vw" height="70vw" persistent>
      ...some stuff...
    </v-dialog>
  </v-container>
</template>

<script>
import dialogCloseMixin from './dialogCloseMixin.js'

export default {
  name: "a name",
  mixins: [dialogCloseMixin], // 引入混入
  props: {
    value: { required: true },
  }
};
</script>

方案二：自定义指令（Directive） #

如果希望更灵活地给任意v-dialog绑定关闭逻辑，可以写一个全局自定义指令：

// 在main.js中注册全局指令
Vue.directive('dialog-close', {
  bind(el, binding, vnode) {
    const closeDialog = () => {
      // 通过vnode获取组件实例，触发关闭
      vnode.context.$emit('input')
    }

    const handleEscape = (evt) => {
      if (evt.key === 'Escape') closeDialog()
    }

    const handleDblclick = (e) => {
      // 从当前dialog的DOM结构中找遮罩层，避免全局冲突
      const scrim = el.querySelector('.v-overlay__scrim')
      if (e.target === scrim) closeDialog()
    }

    // 把事件处理器存到el上，方便解绑时移除
    el._dialogKeyup = handleEscape
    el._dialogDblclick = handleDblclick

    document.addEventListener('keyup', el._dialogKeyup)
    document.addEventListener('dblclick', el._dialogDblclick)
  },
  unbind(el) {
    document.removeEventListener('keyup', el._dialogKeyup)
    document.removeEventListener('dblclick', el._dialogDblclick)
  }
})

在组件中使用：

<template>
  <v-container>
    <!-- 给v-dialog添加指令即可 -->
    <v-dialog v-dialog-close :value="value" max-width="55vw" height="70vw" persistent>
      ...some stuff...
    </v-dialog>
  </v-container>
</template>

<script>
export default {
  name: "a name",
  props: {
    value: { required: true },
  }
};
</script>

额外优化点 #

1. 遮罩层的选择器结合v-dialog的active状态，避免多个对话框同时存在时误触发
2. 可以在mixin或指令中添加开关，允许组件按需启用/禁用某一种关闭方式（比如只开ESC关闭）

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