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. SummarizeThis 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:
|
<<: dl, dt, dd list label examples
>>: How to create your own Docker image and upload it to Dockerhub
Table of contents 1. Background 2. Local custom i...
Table of contents 1: Prepare https certificate 2:...
Purpose: 1. In order to map the server's exte...
Previous words Line-height, font-size, and vertica...
Detailed explanation of the implementation method...
Table of contents Achieve results Available plugi...
1. Node server setup + database connection The op...
I recently encountered a feature while working on...
After the official release of Activiti7, it has f...
Basic environment configuration Please purchase t...
Table of contents 1. Introduction to FastDFS 1. I...
1. Zabbix backup [root@iZ2zeapnvuohe8p14289u6Z /]...
1. Basic use of firewalld start up: systemctl sta...
The pitfalls of MySQL read-write separation The m...
Sometimes, in order to facilitate the export and ...