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
This article shares the specific code for JavaScr...
There are many tutorials on the Internet, and the...
Preface By default, Nginx logs are written to a f...
What are the attributes of the JS script tag: cha...
Table of contents What is MySQL NDB Cluster Preli...
1. Discover the problem © is the copyrigh...
A mysql-like php switch case statement. select xx...
Table of contents Tutorial Series 1. Install Mari...
Table of contents Ref and Reactive Ref Reactive T...
Table of contents 1. Compiler code format specifi...
Table of contents vite Build Configuration vite.c...
Preface This article introduces how to use the ne...
Table of contents 1. Introduction to pid-file 2.S...
Table of contents 1. Open WeChat Pay 1.1 Affiliat...
Table of contents Angular accomplish Calling orde...