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

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!

You may also be interested in:
  • Vue2.x obtains data from QQ music API through the backend interface proxy
  • Detailed explanation of proxy access to data in Vue source code
  • VUE Getting Started Learning Event Handling
  • Vue3 Vue Event Handling Guide
  • Detailed explanation of VUE's data proxy and events

<<:  dl, dt, dd list label examples

>>:  How to create your own Docker image and upload it to Dockerhub

Recommend

Implementing a simple whack-a-mole game in JavaScript

This article shares the specific code for JavaScr...

MySQL 8.0.11 installation tutorial with pictures and text

There are many tutorials on the Internet, and the...

Detailed explanation of Nginx timed log cutting

Preface By default, Nginx logs are written to a f...

What are the attributes of the JSscript tag

What are the attributes of the JS script tag: cha...

How to build a MySQL high-availability and high-performance cluster

Table of contents What is MySQL NDB Cluster Preli...

MySQL case when group by example

A mysql-like php switch case statement. select xx...

MariaDB-server installation of MySQL series

Table of contents Tutorial Series 1. Install Mari...

Detailed analysis of the difference between Ref and Reactive in Vue3.0

Table of contents Ref and Reactive Ref Reactive T...

Vue template configuration and webstorm code format specification settings

Table of contents 1. Compiler code format specifi...

Detailed explanation of pid and socket in MySQL

Table of contents 1. Introduction to pid-file 2.S...

Mini Programs use Mini Program Cloud to implement WeChat payment functions

Table of contents 1. Open WeChat Pay 1.1 Affiliat...

An article to quickly understand Angular and Ionic life cycle and hook functions

Table of contents Angular accomplish Calling orde...