vue 回车触发事件

Vue中实现登录页面回车触发事件,

原创已于 2023-06-28 22:23:00 修改 · 3.8k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #前端 #javascript

于 2023-06-28 21:58:25 首次发布

文章讲述了在Vue框架下，如何在登录页面上通过监听键盘事件，特别是回车键（ASCII码13），来触发登录方法。通过在按钮上绑定`@keyup.enter`事件和在`methods`中定义`keyDown`函数，阻止默认的换行行为，实现回车登录的功能。此外，还在组件的`mounted`和`destroyed`钩子中分别添加和移除全局键盘监听事件。

登录页面,输入完成后回车触发事件

步骤一: input里绑定回车事件

  //vue 回车传参用 $event 接收参数的时候用e就可以
  <el-button size="small" round class="btn" 
          @click="getList()" @keyup.enter="keyDown($event)" >登录</el-button>

步骤二:

 methods:{

     keyDown(e) {
               // 回车则执行登录方法 enter键的ASCII是13
               if (e.key == 'Enter') {
                  this.getList(); // 定义的登录方法 ...............
                  e.preventDefault(); // 去掉默认的换行
              }
           },

     },

   mounted() { 

             // 绑定监听事件
        window.addEventListener("keydown", this.keyDown);
    },
    destroyed() {
         
           // 销毁事件
        window.addEventListener("keydown", this.keyDown);
    }