ElementUI中form表单兜底校验

<el-form ref="ruleForm" :model="ruleForm" :rules="rules"  label-width="100px" class="demo-ruleForm">
 <el-button
        class="loginBtn"
        :loading="loading"
        type="primary"
        style="width:100%;margin-bottom:30px;"
        @click.native.prevent="handleLogin"
      >登录</el-button>
</el-form>

 handleLogin() {
    //  兜底校验 通过组件身上的ref   1-拿到实例对象 2.对象身上的方法validate
    this.$refs.loginForm.validate((valid)=>{
      if(valid){
        // 登录
        console.log('所有校验都通过了');
      }
    })
  }

// 新添属性
  background-image: url("~@/assets/common/login.jpg"); // 设置背景图片
  background-position: center; // 将图片位置设置为充满整个屏幕

  .loginBtn {
    //改变登录按钮的样式 >先添加 .loginBtn类名
    background: #407ffe;
    height: 64px;
    line-height: 32px;
    font-size: 24px;
  }