布局方式
通过inline-block对齐,一行所有的元素共占一行(icon、确定按钮、取消按钮),默认垂直居中(vertical-align: center)。
image.png
对齐方式
vertical-align: top
image.png
输入框回车和点击登录按钮
- 1.
keyup.enter.native回车键触发,组件得加上 .native 才能监听原生事件 - 2.
click.native.prevent是用来阻止默认行为的。 -
3.span标签用的比较多
image.png
loading登录按钮
width:100%和loading状态更改
image.png
先检测用户输入的有效性,开启loading,服务器消息返回后关闭loading
handleLogin() {
this.$refs.loginForm.validate(valid => {
if (valid) {
this.loading = true
this.$store.dispatch('LoginByUsername', this.loginForm).then(() => {
this.loading = false
this.$router.push({ path: this.redirect || '/' })
}).catch(() => {
this.loading = false
})
} else {
console.log('error submit!!')
return false
}
})
}








网友评论