vue里面如何监听键盘事件

最近项目里面有个需求：点击小图全屏展示大图,然后用户点击右上角的X按钮或者直接按ESC退出大图模式。
点击小图全屏展示大图和按x关闭大图都很容易实现，但是监听esc的事件费了点事件，最开始是这么写的

<div class="viewLargerImageContainer" @keyup.27='escEvent'>
  <span class="el-icon-circle-close-outline close-icon" @click="$emit('closeImg')"></span>
  <img :src="imgSrc" ref='largerImg'>
</div>

然而并没有奏效，因为@keyup这样的写法似乎只能在input这样的输入框里面执行，于是百度到KeyboardEvent,解决了问题。

<div class="viewLargerImageContainer">
  <span class="el-icon-circle-close-outline close-icon" @click="$emit('closeImg')"></span>
  <img :src="imgSrc" ref='largerImg'>
</div>

mounted() {
  this.escEvent();
},

methods: {
  escEvent() {
    document.addEventListener('keyup', (event) => {
      const keyName = event.key;
      if (keyName === 'Escape') {
        this.$emit('closeImg');
      }
    });
  }
}