布局方式

通过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
        }
      })
    }