文本输入上的Vue3事件@keydown.esc未触发

Question

我有一个包含各种事件的文本字段。所有活动都有效，但不是

@keydown.esc

。

我想区分

@blur

和

@keydown.esc

。逃避总是应该做一些事情，并且

@blur

只是有时。

找到此代码codepen.io/whitelynx/pen/wGvmdW 显示每个键的键码，但不显示转义键。

vue js 3 中的

@keydown.esc

有什么特别之处吗？这在版本 2 中不是问题。

我的元素

<input type="text" v-model="searchQuery" @keyup="searchItems" @paste="searchItems" @keydown.down="arrowDown" @keydown.up="arrowUp" @keydown.enter="selectIndex"
@keyup.,="selectIndex" @keydown.esc="closeSearch" @blur="maybeCloseSearch"
@focus="initSearch" placeholder="Search …" autocomplete="off" \>

我尝试删除所有其他事件，仅删除@keydown.esc，但这没有什么区别

Answer 1

“解决方案”：我发现我的浏览器扩展 Vimium i 导致了这个问题

Answer 2

修正错误：

输入标签结尾错误

    \>

定义所有方法

有效！

游乐场

const App = {
  data() { return { searchQuery: null } },
  methods: {
    initSearch: () => console.log('initSearch'),
    closeSearch: () => console.log('closeSearch'),
    maybeCloseSearch: () => console.log('maybeCloseSearch'),
  }
}
const app = Vue.createApp(App);
app.mount('#app');

#app { line-height: 2; }
[v-cloak] { display: none; }

<div id="app">
  <input type="text" v-model="searchQuery" @keydown.esc="closeSearch" @blur="maybeCloseSearch" @focus="initSearch" placeholder="Search …" autocomplete="off" />
</div>
<script src="https://unpkg.com/vue@3/dist/vue.global.prod.js"></script>