perf[Login]: optimize input focus interaction (#1798)

This commit is contained in:
MaYuanhai 2019-03-29 12:55:07 +08:00 committed by Pan
parent 53f1820d09
commit 1592a0a364
1 changed files with 13 additions and 1 deletions

View File

@ -13,6 +13,7 @@
<svg-icon icon-class="user" /> <svg-icon icon-class="user" />
</span> </span>
<el-input <el-input
ref="username"
v-model="loginForm.username" v-model="loginForm.username"
:placeholder="$t('login.username')" :placeholder="$t('login.username')"
name="username" name="username"
@ -26,6 +27,7 @@
<svg-icon icon-class="password" /> <svg-icon icon-class="password" />
</span> </span>
<el-input <el-input
ref="password"
v-model="loginForm.password" v-model="loginForm.password"
:type="passwordType" :type="passwordType"
:placeholder="$t('login.password')" :placeholder="$t('login.password')"
@ -96,7 +98,7 @@ export default {
return { return {
loginForm: { loginForm: {
username: 'admin', username: 'admin',
password: '1111111' password: '111111'
}, },
loginRules: { loginRules: {
username: [{ required: true, trigger: 'blur', validator: validateUsername }], username: [{ required: true, trigger: 'blur', validator: validateUsername }],
@ -119,6 +121,13 @@ export default {
created() { created() {
// window.addEventListener('hashchange', this.afterQRScan) // window.addEventListener('hashchange', this.afterQRScan)
}, },
mounted() {
if (this.loginForm.username === '') {
this.$refs.username.focus()
} else if (this.loginForm.password === '') {
this.$refs.password.focus()
}
},
destroyed() { destroyed() {
// window.removeEventListener('hashchange', this.afterQRScan) // window.removeEventListener('hashchange', this.afterQRScan)
}, },
@ -129,6 +138,9 @@ export default {
} else { } else {
this.passwordType = 'password' this.passwordType = 'password'
} }
this.$nextTick(() => {
this.$refs.password.focus()
})
}, },
handleLogin() { handleLogin() {
this.$refs.loginForm.validate(valid => { this.$refs.loginForm.validate(valid => {