An article teaches you how to implement VUE multiple DIVs and button binding enter events

There is currently a requirement that an operation is performed when the OK button is clicked or the keyboard enter is pressed, which is needed in many places.

I tried several methods but none of them worked.

First, I bound the @keyup.enter method to the div (button as well), but it had no effect at all. Then I followed the method on the Internet and wrote it like this:

<div class="btn submit" @keyup.enter="submit" @click="submit">Confirm (Ent)</div>

created(){
   document.onkeydown = function(e) {
     if(e.keyCode == 13){
       console.log("Call the method that needs to be executed"); 
     }
   }
 },

This can indeed implement the carriage return event, but it is global, that is, when you press the enter key in other components, the carriage return event here will also be called. This method does not work.

Then I did this:

1. Add an <input> tag between the OK button and the Cancel button (placing it in the middle can serve as a spacer between the buttons, so there is no need to write margin-left), and then add the @keyup.enter event to this input tag;

<template slot="footer">
        <div class="dialog-footer dis-flex">
          <div class="btn cancel" @click="showDialog = false">Cancel (Esc)</div>
          <input
            type="text"
            ref="inputdata"
            class="hiddenIpt"
            @keyup.enter="submit"
          />
          <div class="btn submit" @click="submit">
            Confirm (Ent)
          </div>
        </div>
</template>

2. Write a listener to automatically focus the input box when the pop-up window is opened (inputdata is bound to the input with ref).

watch:
    showDialog() {
      if (this.showDialog) {
        //this.$refs.inputdata.focus(); Wrong way to write this.$nextTick(() => {//Correct way to write this.$refs.inputdata.focus();
        });
      }
    },
  },

3. Hide the input box (set the width to be used as the interval between the OK button and the Cancel button.)

.hiddenIpt {
    width: 2rem;
    opacity: 0;
  }

This is the perfect solution. If you have a better solution, welcome to communicate with us.

Summarize

This article ends here. I hope it can be helpful to you. I also hope that you can pay more attention to more content on 123WORDPRESS.COM!