今天在写登录功能的时候,在用Vue的@key.enter的时候由于使用elementUI组件,@keyup.enter不起作用,经排查,发现需要这样@keyup.enter.native=“login”
代码

<el-form ref="loginForm" :model="loginForm" :rules="myRules"  @keyup.enter.native="login">
              <el-form-item prop="account">
                <el-input v-model="loginForm.account" type="text" placeholder="请输入用户名">
                  <template slot="prepend">用户名</template>
                </el-input>
              </el-form-item>
              <el-form-item prop="pwd">
                <el-input v-model="loginForm.pwd" type="password" placeholder="请输入登录密码">
                  <template slot="prepend">登录密码</template>
                </el-input>
              </el-form-item>
              <el-form-item>
                <el-button type="primary" @click="login"  >登录</el-button>
              </el-form-item>
 </el-form>

使用情景
实现点击enter键的时候能够提交表单
在这里插入图片描述
1、当用@keyup.enter敲击enter回车之后直接提交表单, 如果加了element组件就要用

@keyup.enter.native , 但是当你只有一个输入框的时候 from元素上要加上。

2、当然也可以在input上加监听

<input v-on:keyup.13="login">
Logo

前往低代码交流专区

更多推荐