Vue+element使用@keyup.enter不起作用
今天在写登录功能的时候,在用Vue的@key.enter的时候由于使用elementUI组件,@keyup.enter不起作用,经排查,发现需要这样@keyup.enter.native=“login”代码<el-form ref="loginForm" :model="loginForm" :rules="myRules"@keyup.enter.native="login"><
·
今天在写登录功能的时候,在用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">
更多推荐
已为社区贡献6条内容
所有评论(0)