vue监听esc事件

在Vue中，要监听esc事件可以使用Vue的事件修饰符和自定义指令的方式。

1. 使用事件修饰符：
在模板中，可以使用`@keydown.esc`来监听键盘的esc键按下事件。例如：

<template>
  <div @keydown.esc="handleEsc"></div>
</template>

然后在Vue实例中定义`handleEsc`方法来处理esc键按下事件。例如：

<script>
export default {
  methods: {
    handleEsc() {
      // 处理esc键按下事件的逻辑
    }
  }
}
</script>

当esc键被按下时，`handleEsc`方法会被调用。

2. 使用自定义指令：
可以通过自定义指令的方式来监听esc键按下事件。

Vue.directive('esc', {
  bind: function(el, binding, vnode) {
    el.__handleEsc__ = function(event) {
      if (event.keyCode === 27) {
        binding.value() // 调用指令绑定的回调函数
      }
    }
    document.addEventListener('keydown', el.__handleEsc__)
  },
  unbind: function(el) {
    document.removeEventListener('keydown', el.__handleEsc__)
    delete el.__handleEsc__
  }
})

然后在模板中使用`v-esc`指令来将esc键事件绑定到元素上。例如：

<template>
  <div v-esc="handleEsc"></div>
</template>

在Vue实例中定义`handleEsc`方法来处理esc键按下事件。例如：

<script>
export default {
  methods: {
    handleEsc() {
      // 处理esc键按下事件的逻辑
    }
  }
}
</script>

同样，当esc键被按下时，`handleEsc`方法会被调用。

以上是两种常见的在Vue中监听esc事件的方式，根据具体情况选择适合的方式即可。