项目中如何实现按esc关闭当前侧边弹窗？

背景： 三层弹窗，按esc关闭最上方弹窗

思路： 全局监听键盘事件，全局实现一个弹窗栈结构，打开弹窗栈里push一个关闭当前弹窗的方法，关闭弹窗出栈，按esc出栈，并执行当前出栈的函数

实现：

维护一个全局弹窗栈结构

class Model {
  constructor() {
    this.stack = []
  }
  push(cb) {
    this.stack.push(cb)
  }
  pop() {
    this.stack.pop()
  }
  close() {
    const cur = this.stack[this.stack.length-1]
    cur()
  }
}
export default new Model()

最外层引用：

import  closeModel  from 'xxx'

  mounted() {
    window.addEventListener('keydown', this.handleEsc)
  },
  beforeDestroy() {
    window.removeEventListener('keydown', this.handleEsc)
  },
  methods: {
    handleEsc(event) {
      if (event.key === 'Escape' || event.keyCode === 27) {
        closeModel.close()
      }
    }
  }

弹窗组件应用:

import  closeModel  from 'xxx'

   watch: {
    visible(newVal, oldVal) {
      if (newVal) {
          const close = () => {
              this.close()
              closeModel.pop()
          }
        closeModel.push(close)
      }
    },
  }，
  methods: {
    clickClose(){
          this.close();
          closeModel.pop()
    },
    close(){
        this.visible = false
    }
  }

这里需要注意 pop不能放在visible变为false时，这个时机无法区分是用户手动点击关闭弹窗，还是按下esc执行了closeModel中的close方法。