Login details analysis
Detail 1: Automatic focus after page startup
Check if the username or password is empty, if found to be empty, automatically focus:
mounted() {
// 将username设为空 ，然后不为空就会聚焦到password上
if (this.loginForm.username === '') {
this.$refs.username.focus()
} else if (this.loginForm.password === '') {
this.$refs.password.focus()
}
}
Detail 2: Automatically focus after displaying password
After switching the password display state, the password input box is automatically focused:
showPwd() {
if (this.passwordType === 'password') {
this.passwordType = ''
} else {
this.passwordType = 'password'
}
this.$nextTick(() => {
this.$refs.password.focus()
})
}
Detail 3: Filter object attributes through reduce
const query = {
redirect: '/book/list',
name: 'sam',
id: '1234'
}
// 直接删除 query.redirect，会直接改动 query
// delete query.redirect
// 通过浅拷贝实现属性过滤
// const _query = Object.assign({}, query)
// delete _query.redirect
// reduce 特点就是叠加
const _query = Object.keys(query).reduce((acc, cur) => {
if (cur !== 'redirect') {
acc[cur] = query[cur]
}
return acc
}, {
})
console.log(query, _query)
Vue admin
login process
interface simplification and routing processing (implementing permission control)
routing and permission verification principles
sidebar
redirection
breadcrumb navigation
requst library axios interception
login component implementation details