×

Vue事故:登录页面回车执行事件@keyup.enter.native

作者:Terry2023.03.05来源:Web前端之家浏览:366评论:0
关键词:vuejs

Vue事故:登录页面回车执行事件@keyup.enter.native。

vue登录页面回车执行事件@keyup.enter.native

<el-form ref="loginForm" :model="loginForm" :rules="loginFormRules" label-width="80px">
        <!-- 用户名 -->
        <el-form-item label="用户名" prop="userName">
          <el-input v-model="loginForm.userName" prefix-icon="el-icon-user" clearable @keyup.enter.native="submitForm('loginForm')"></el-input>
        </el-form-item>
        <!-- 密码 -->
        <el-form-item label="密码" prop="passWord" style="margin-bottom: 0;">
          <el-input v-model="loginForm.passWord" prefix-icon="el-icon-lock" type="password" show-password @keyup.enter.native="submitForm('loginForm')"></el-input>
        </el-form-item>
</el-form>

vue中回车键登录实现

给登录按钮绑定两个点击事件:

代码如下:

<el-button type="primary" @click="login()" @keyup.enter="keyDown(e)">登录</el-button>

login 是直接点击按钮的登录事件:

代码如下:

  methods: {
    login() {
      
    },
    
    // 点击回车键登录
    keyDown(e) {
      // 回车则执行登录方法 enter键的ASCII是13
      if (e.keyCode == 13 || e.keyCode == 100) {
        this.login(); // 定义的登录方法
      }
    },
  },
  mounted() {
    // 绑定监听事件
    window.addEventListener("keydown", this.keyDown);
  },
  destroyed() {
    // 销毁事件
    window.removeEventListener("keydown", this.keyDown, false);
  },

这样就实现点击键盘回车键和点击按钮实现登录功能。

您的支持是我们创作的动力!
温馨提示:本文作者系Terry ,经Web前端之家编辑修改或补充,转载请注明出处和本文链接:
https://www.jiangweishan.com/article/vuejs20230305.html

网友评论文明上网理性发言 已有0人参与

发表评论:

最新留言

  • 访客

    啊...

  • jimmy

    SEO更多跟代码有关。...

  • jianj

    node看上有点复杂...

  • 访客

    正好遇到,谢谢分享...

  • jimmy

    这个很有趣,国内SEO更多的是百度...

  • jenny

    VUE的总结的不错啊,收藏了。下次搞点React的啊...

  • jenny

    win7最经典,想当初win8出来后都没它好用,怀恋经典。。。...

  • Terry

    谢谢提醒,插件已经修复。...

首页|JavaScript|HTML|HTML4|HTML5|CSS3|开发工具|性能优化|移动开发|前端教程|性能优化|开发工具|酷站欣赏|UI设计|前端教程

Copyright © 2023 Web前端之家(www.jiangweishan.com) 版权所有 All Rights Reserved.
粤ICP备12067512号-1

Copyright Your WebSite.Some Rights Reserved.

Powered By Z-BlogPHP 1.7.2