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

 更新时间:2023年03月04日 14:43:25   作者:吴冬雪~  
这篇文章主要介绍了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);
  },

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

总结

以上为个人经验,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • 解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题

    解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题

    今天小编就为大家分享一篇解决vue2.0路由跳转未匹配相应用路由避免出现空白页面的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-08-08
  • vue使用高德地图实现实时定位天气预报功能

    vue使用高德地图实现实时定位天气预报功能

    这篇文章主要介绍了vue使用高德地图实现实时天气预报功能,根据定位功能,使用高德地图实现定位当前城市的天气预报功能,本文通过实例代码给大家介绍的非常详细,需要的朋友可以参考下
    2022-05-05
  • vux uploader 图片上传组件的安装使用方法

    vux uploader 图片上传组件的安装使用方法

    这篇文章主要介绍了vux-uploader 图片上传组件的安装及使用方法,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-05-05
  • 解决使用Vue.js显示数据的时,页面闪现原始代码的问题

    解决使用Vue.js显示数据的时,页面闪现原始代码的问题

    下面小编就为大家分享一篇解决使用Vue.js显示数据的时,页面闪现原始代码的问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2018-02-02
  • Vue3实现跨页面传值的几种常见方法

    Vue3实现跨页面传值的几种常见方法

    在Vue 3中,跨页面传值可以通过多种方式实现,具体选择哪种方法取决于应用的具体需求和页面间的关系,本文列举了几种常见的跨页面传值方法,感兴趣的同学跟着小编来看看吧
    2024-04-04
  • Vue首评加载速度及白屏时间优化详解

    Vue首评加载速度及白屏时间优化详解

    这篇文章主要介绍了vue项目优化首评加载速度,以及白屏时间过久的问题,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2022-09-09
  • Vue前端路由hash与history差异深入了解

    Vue前端路由hash与history差异深入了解

    这篇文章主要为大家介绍了Vue前端路由hash与history差异的深入了解,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
    2022-06-06
  • 通过一个简单的例子学会vuex与模块化

    通过一个简单的例子学会vuex与模块化

    这篇文章主要给大家介绍了关于如何通过一个简单的例子学会vuex与模块化的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧。
    2017-11-11
  • vue3.0使用vue-pdf-embed在线预览pdf 控制页码显示范围不生效问题解决

    vue3.0使用vue-pdf-embed在线预览pdf 控制页码显示范围不生效问题解决

    这篇文章主要介绍了vue3.0使用vue-pdf-embed在线预览pdf 控制页码显示范围不生效问题的问题及解决方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧
    2023-01-01
  • vue之字符串、数组之间的相互转换方式

    vue之字符串、数组之间的相互转换方式

    这篇文章主要介绍了vue之字符串、数组之间的相互转换方式,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-07-07

最新评论