vue绑定enter事件,vue单选按钮改变事件

　　本文主要介绍了VUE的多个DIV绑定回车事件，具有很好的参考价值。希望对大家有帮助。来和边肖一起看看吧。

　　目前有一个需求是这样的，很多地方在你点击确定按钮或者输入键盘的时候都会用到。

　　尝试了几种方法但都失败了，

　　首先，我在div上绑定了@keyup.enter方法(button也是一样)，完全不起作用。然后我就按照网上的方法，这样写：

　　class= BTN submit @ keyup . enter= submit @ click= submit ok(Ent)/div

　　已创建(){

　　document . onkeydown=function(e){

　　if(e.keyCode==13){

　　Console.log(调用需要执行的方法)；

　　}

　　}

　　},

　　确实可以实现回车事件，但是它是全局的，也就是说当其他组件回车的时候你也会在这里调用回车事件。这种方法行不通。

　　然后我是这样做的：

　　1.在确定按钮和取消按钮之间添加一个输入标签(放在中间作为按钮的间隔，这样就不用写margin-left了)，然后在这个输入标签中添加@keyup.enter事件；

　　模板槽=页脚

　　div class=对话框页脚显示弹性

　　class= BTN cancel @ click= showdialog=false 取消(Esc)/div

　　投入

　　type=text

　　ref=inputdata

　　隐藏的

　　@keyup.enter=submit

　　/

　　div class=btn提交 @click=提交

　　确认(Ent)

　　/div

　　/div

　　/模板

　　2.写一个监听器。当弹出窗口打开时，自动聚焦输入框(inputdata在输入上用ref绑定)。

　　观察：{

　　showDialog() {

　　if (this.showDialog) {

　　//这个。$ refs . input data . focus()；写错了

　　这个。$nextTick(()={//正确拼写

　　这个。$ refs . input data . focus()；

　　});

　　}

　　},

　　},

　　3.隐藏输入框(设置宽度，用作确认按钮和取消按钮之间的间隔。)。hiddenIpt {

　　宽度：2雷姆；

　　不透明度：0；

　　}

　　这是完美的解决方案，有更好的方法，欢迎交流。

总结

　　本文到此为止。希望能帮到你，也希望你能多关注我们的更多内容！

郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。