Element ui 组件中用键盘事件

杨秉祺

已于 2022-07-27 09:25:52 修改

阅读量2k

点赞数

文章标签： ui vue.js elementui

于 2022-07-27 09:22:40 首次发布

本文链接：https://blog.csdn.net/YBQyyds/article/details/126007567

版权

该博客介绍了如何在ElementUI组件中添加键盘事件监听，特别是针对密码输入框的回车键提交表单操作。通过在`el-input`组件上使用`@keydown.enter.native`绑定提交事件，确保在ElementUI封装的组件中正确处理键盘事件。

摘要由CSDN通过智能技术生成

//这是表单 
<el-form
        :model="ruleForm"
        status-icon
        :rules="rules"
        ref="ruleForm"
        class="demo-ruleForm"
      >
        <el-form-item prop="username">
          <el-input v-model="ruleForm.username" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item prop="password">
//本次触发键盘事件的input密码输入框
          <el-input
            type="password"
            v-model="ruleForm.password"
            autocomplete="off"


//！！！！！！！！！重点在这里！！！！！！！！！
            @keydown.enter.native="submitForm('ruleForm')"
//正常的input框只需要通过定义@keydown.enter键盘事件就可以了
//@keydown代表的是键盘按下触发，.enter代表的是vue中讲回车键的keycode码给封装了
// @keydown.enter.native后面跟的是在密码输入框中输入回车键需要触发的键盘事件
//只要在element ui组件中加键盘事件必须在后面加.native，因为在element ui 组件中被重新封装过了
//！！！！！！！！！重点在上面！！！！！！！！！


          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button
            style="width: 100%"
            type="primary"
            @click="submitForm('ruleForm')"
          >
            登录
          </el-button>
        </el-form-item>
      </el-form>

很急的朋友看这里

在element ui 组件中需要触发键盘事件的地方加上@keydown.enter.native="需要触发的事件方法"