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

Vue custom directive details

Table of contents 1. Background 2. Local custom i...

Implementation of Nginx configuration https

Table of contents 1: Prepare https certificate 2:...

Comprehensive understanding of line-height and vertical-align

Previous words Line-height, font-size, and vertica...

Vue integrates PDF.js to implement PDF preview and add watermark steps

Table of contents Achieve results Available plugi...

Example code for implementing verification code login in SMS API in Node

1. Node server setup + database connection The op...

The perfect solution for highlighting keywords in HTML

I recently encountered a feature while working on...

SpringBoot integrates Activiti7 implementation code

After the official release of Activiti7, it has f...

How to deploy DoNetCore to Alibaba Cloud with Nginx

Basic environment configuration Please purchase t...

Build a file management system step by step with nginx+FastDFS

Table of contents 1. Introduction to FastDFS 1. I...

Detailed tutorial for upgrading zabbix monitoring 4.4 to 5.0

1. Zabbix backup [root@iZ2zeapnvuohe8p14289u6Z /]...

Detailed explanation of the basic use of centos7 firewall in linux

1. Basic use of firewalld start up: systemctl sta...

Common solutions for Mysql read-write separation expiration

The pitfalls of MySQL read-write separation The m...

HeidiSQL tool to export and import MySQL data

Sometimes, in order to facilitate the export and ...