Question

我希望听一个＆＃39; esc＆＃39;键事件，以便在Vue组件中调用方法。文档显示了这个例子：

<input v-on:keyup.enter="submit">

但是我使用的是<div></div>，需要从外面捕捉事件。但是，我希望不要重载全局处理程序或类似的东西。

有什么建议吗？

Answer 1

对于任何在谷歌，在Vue 2中徘徊的人......

<div @keydown.esc="something_in_your_methods"></div>

Answer 2

你做不到。密钥事件从body标签分派，Vue无法安装到<body>标签。

Sourced from "When VueJS Can't Help You" ]

您必须设置自己的事件监听器。

（图片来源及When VueJS Can't Help You处的更多信息）

Answer 3

我所做的就是去混音。

名为close.js的文件中的mixin

export default {
    created() {
        let that = this;

        document.addEventListener('keyup', function (evt) {
            if (evt.keyCode === 27) {
                that.close();
            }
        });
    },
};

导入并在所需组件中使用

import closeMixin from './../../mixins/close.js';

export default {
    mixins: [closeMixin],
    props: [],
    computed: {}
}

Answer 4

使keydown事件在div和其他不可聚焦元素上起作用的秘诀是添加一个tabindex属性：

<div tabindex="0"
    @keydown.left="previousImage"
    @keydown.right="nextImage" />

现在div已成为可关注的元素，并且将触发关键事件。

有关focusable elements and tabindex

的更多信息

Answer 5

就我而言，我创建了一个指令 v-esc.ts。 (※这是Vue3指令的写法)

import { Directive } from 'vue'
const directive: Directive = {
  beforeMount(el, binding) {
    document.addEventListener('keydown', (event) => {
      if (event.key === 'Escape') {
        binding.value()
      }
    })
  },
  unmounted(el, binding) {
    document.removeEventListener('keydown', (event) => {
      if (event.key === 'Escape') {
        binding.value()
      }
    })
  }
}
export const esc = { esc: directive }

然后我可以在任何像这样的组件中使用它。（注意：您必须将函数参数传递给 v-esc，因为

<template>
  <img
    @click.prevent="close"
    v-esc="close"
    src="@/assets/icons/close.svg"
  />
</template>

<script lang="ts">
import { defineComponent } from 'vue'
import { esc } from '@/common/directives/v-esc'
export default defineComponent({
  name: 'nitCloseButton',
  ...
  methods: {
    close() {
      this.$emit('close')
    }
  },
  directives: {
    ...esc
  }
})
</script>

倾听＆＃34; esc＆＃34; Vue.js中div组件的键事件

5 个答案: