//页面结构
<el-form ref="userForm" :model="userInfo" status-icon :rules="userRules" class="right">
<div class="title">门户登录</div>
<el-form-item label="" prop="username">
<el-input
type="text"
v-model="userInfo.username"
placeholder="用户名"
autocomplete="off"
size="medium"
@focus="usernameGetFouce"
@keyup.enter.native="focusNext('mobile')"
/>
</el-form-item>
<el-form-item label="" prop="password">
<el-input
type="password"
v-model="userInfo.password"
placeholder="密码"
show-password
autocomplete="off"
size="medium"
@focus="pwdGetFocus"
@keyup.enter.native="changeFocus('submit')"
ref="mobile"
/>
</el-form-item>
<el-button
size="medium"
:loading="subloading"
@click="handleLogin"
>登录</el-button>
</el-form>
//js部分
// 用户名获取焦点
usernameGetFouce(e) {
this.pawFocus = false
this.offFocus = false
this.userFocus = true
},
// 密码框获取焦点
pwdGetFocus() {
this.pawFocus = true
this.offFocus = false
this.userFocus = false
},
//切换到密码框
focusNext(nextRef) {
this.$refs[nextRef].focus()
},
//密码框enter触发登录
changeFocus(obj) {
if (obj === 'submit') this.handleLogin()
},
登陆页 用户名输入框按下enter切换到密码输入框;再按下enter,触发登陆事件
最新推荐文章于 2024-06-09 17:12:17 发布