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

【问题标题】：vuejs2 listening for if the user pressed the @ keyvuejs2 监听用户是否按下了@键
【发布时间】：2018-01-09 23:49:36
【问题描述】：

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

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

谢谢，

【问题讨论】：

标签： javascript vue.js vuejs2

【解决方案1】：

您可以使用@keyup.shift.50 捕获在非移动 QWERTY 和 DVORAK 键盘上同时按下了 ⇧ 和 2 键。我不确定外国键盘。

console.clear()

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

<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>

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

console.clear()

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

<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>

【讨论】：

嗨@Bert，感谢您的回答！我不了解所有不同类型键盘的设置，但这适用于所有设置/MAC/Window 等吗？
@YeasirArafatMajumder 它基于 Javascript KeyboardEvent 对象，但我真的不知道是否有一些键盘会为 @ 使用不同的组合键。据我所知，输入@ 的唯一方法是使用 shift 和 2 键。这是一个我肯定是错的情况。对于标准 QUERTY，是的，它会起作用。也适用于 DVORAK。对于外国键盘，你的猜测和我一样好。
移动设备有一个@字符的专用键。你知道这些方法应该是什么吗？
@YeasirArafatMajumder 好点。在移动键盘的情况下，我认为您不能使用修饰符来检测@。您必须求助于处理事件并检查事件对象。我用一个例子更新了答案。
在德语 mac 键盘上，@ 是 ALTL。在德语 Windows 键盘上，@ 是 ALTGR-Q。