Vue - 仅当您连续按两次键时才触发事件

Question

I'm implementing a special field in my application, when the user input the @ (shift + 50) character, a window will pop up so the user can access predefined variables...

<textarea @keyup.shift.50="showWindow"></textarea>

My question is: I do not want the window to appear when the user presses the key only once, I want the window to appear when he presses the keys a twice.

Is it possible?

Answer 1

============NEW============================================

Edit: modified and cleaned up the code for you - this code is more efficient and does not contain any 'bugs' (there are some flaws in the other code)..

Explanation: I basically collect all 'shift.50' key presses and compare their delta - then overwrite - this means if you press 'shift.50' then dont press it again til 5 minutes later (would be the 2nd click in the old code) you would have to essentially click it 3 times to fire the 'do the needful' event..

https://jsfiddle.net/yL57kbhf/

var myapp = new Vue({
  el: '#app',
  data: {
    delta: 1000, // in ms
    keyPress: null,
  },
  methods: {
    keyPressed(key) {
      if(this.keyPress !== null){ 
        let d = key.timeStamp - this.keyPress.timeStamp;
        if(this.delta > d){
            alert('do something here!')
        }
      }
      this.keyPress = key;
    },
  }
})

.

.

=============OLD============================================

Explanation: In the following code I keep track of how many times you click the 'shift.50' button using the data property 'pressCount'. On the first press I store the click event in 'keyPress' in an effort to compare the delta (which is a property you can set under 'delta') with the second key press. If there are 2 consecutive key presses within N (where N=delta) then you can "do the needful"..

https://jsfiddle.net/c0tk6pbx/

var myapp = new Vue({
    el: '#app',
  data: {
    delta: 1000, // in ms
    pressCount: 0,
    firstPress: null,
  },
  methods: {
    keyPressed(key) {
        this.pressCount++;
        if(this.pressCount === 1){
        this.firstPress = key;
      } 
      if(this.pressCount === 2){
        let d = key.timeStamp - this.firstPress.timeStamp
        if(this.delta > d){         
            alert("do something here");
        }
        this.pressCount = 0;
      }
    },
  }
})