登录细节分析
细节一:页面启动后自动聚焦
检查用户名或密码是否为空,如果发现为空,则自动聚焦:
mounted() {
// 将username设为空 ,然后不为空就会聚焦到password上
if (this.loginForm.username === '') {
this.$refs.username.focus()
} else if (this.loginForm.password === '') {
this.$refs.password.focus()
}
}
细节二:显示密码后自动聚焦
切换密码显示状态后,自动聚焦 password 输入框:
showPwd() {
if (this.passwordType === 'password') {
this.passwordType = ''
} else {
this.passwordType = 'password'
}
this.$nextTick(() => {
this.$refs.password.focus()
})
}
细节三:通过 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
登陆流程
界面精简及路由处理(实现了权限控制)
路由和权限校验原理
侧边栏
重定向
面包屑导航
requst库 axios拦截
登录组件实现细节