vuejs2监听用户是否按下了@键

Question

我知道我可以在vue.js中监听关键事件，并为那些事件添加修饰符，例如 keyup.enter 。但我似乎无法为@键找到修饰符，例如 keyup.AT或keyup.at 等。

有没有办法在vue.js2中观察这个关键事件？

感谢，

Answer 1

您可以使用console.clear() new Vue({ el: "#app", data:{ log:[] }, methods:{ onAt(evt){ this.log.push("@ pressed") } } })捕获非移动QWERTY和DVORAK键盘上的⇧和 2 键。我不确定外国键盘。

＆＃13;

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <input type="text" @keyup.shift.50="onAt">
  <hr>
  <div v-for="msg in log">{{msg}}</div>
</div>

＆＃13;

console.clear()

new Vue({
  el: "#app",
  data:{
    log:[]
  },
  methods:{
    onKeyUp(evt){
      if ("@" === evt.key)
        this.log.push("@ pressed")
    }
  }
})

＆＃13;

＆＃13;

＆＃13;

但是，对于 @ 键具有专用按钮的移动键盘，此解决方案不会触发。我不认为有一种方法可以使用Vue中的事件修饰符来处理它，因此您不得不求助于处理keyup事件并检查事件对象。

＆＃13;

＆＃13;

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.13/vue.js"></script>
<div id="app">
  <input type="text" @keyup="onKeyUp">
  <hr>
  <div v-for="msg in log">{{msg}}</div>
</div>

＆＃13;

{{1}}

＆＃13;

＆＃13;

＆＃13;