Vue3+element plus+表单组件（登录功能）

login.vue

<el-form class="login-form" ref="ruleFormRef" :model="ruleForm" :rules="rules" 
label-width="80px" style="width:80%">
      <el-form-item class="login-form-item" label="用户名" prop="username">
           <el-input v-model="ruleForm.username"></el-input>
      </el-form-item>
      <el-form-item class="login-form-item" label="密码" prop="password">
            <el-input type="password" v-model="ruleForm.password"></el-input>
      </el-form-item>
      <el-form-item>
            <el-button type="primary" @click="submitForm(ruleFormRef)">登录</el-button>
      </el-form-item>
 </el-form>

import type { FormInstance } from 'element-plus'
// form实例
setup(){
  const ruleFormRef = ref<FormInstance>()
}

login.ts

import { reactive, ref } from 'vue'
import type { FormInstance } from 'element-plus'

export function login() {

  //校验用户名
  const checkUsername = function (rule: any, value: any, callback: any) {
      if (value.trim() === "") {
          callback(new Error('请输入用户名111'))
      } else {
          callback()
      }
  }

  //校验密码
  const checkPassword = function (rule: any, value: any, callback: any) {
      if (value.trim() === "") {
          callback(new Error('请输入密码222'))
      } else {
          callback()
      }
  }

  const metadata = reactive({
      ruleForm: {
          username: "",
          password: ""
      },
      rules: {
          username: [
              { required: true, validator: checkUsername, message: '请输入用户名', trigger: 'blue' }
          ],
          password: [
              { required: true, validator: checkPassword,  message: '请输入密码', trigger: 'blue' }
          ]
      }
  })


  //表单提交
  const submitForm = async (formEl: FormInstance | undefined) => {
      if (!formEl) return
      await formEl.validate((valid, fields) => {
          if (valid) {
              console.log("submit")
          } else {
              console.log("error submit!", fields)
          }
      })
  }
  return {
      metadata,
      submitForm
  }
}

改变label自体颜色

去掉scoped属性

.login-form{
     .login-form-item .el-form-item__label{
             color: white;
     }
}