vue3完整的登录页面,element-plus

<template>
    <div class="login">
                <el-card class="box-card">
                    <el-form ref="form" :rules="rules" :model="forms" label-width="120px">
                         <el-form-item prop="user" label="用户名:">
                            <el-input v-model="forms.user" />
                        </el-form-item>
                        <el-form-item prop="password" label="密码:">
                               <el-input v-model="forms.password" />
                        </el-form-item>
                        <el-form-item>
                        <el-button type="primary" @click="onSubmit">Create</el-button>
                        </el-form-item>
                    </el-form>
                </el-card>
    </div>
</template>
<script setup lang="ts">
import { ref,reactive } from 'vue';
import type {FromItemRules,FormInstance} from "element-plus"

// do not use same name with ref
interface Iform{
        user:string;
        password:string;
}
const forms = reactive<Iform>({
  user: '',
  password:'',
})
type Iroles={
      [k in keyof Iform]?:Array<FromItemRules>
}
const rules = reactive<Iroles>({
     user:[
        {
          required:true,
          message:"请输入用户名",
          type:"string",
          trigger:"change"
     }],
     password:[
        {
            required:true,
            message:"请输入密码",
            type:"string",
            trigger:"change"
        }
     ]    
})
const form = ref<FormInstance>();
const onSubmit = () => {
  console.log('submit!')
  form.value?.validate((validate:boolean)=>{
      console.log(validate)
  })
}
</script>
<style scoped>
.login{
      width: 100%;
      height: 100%;
      display: flex;
      flex-direction:row;
      justify-content: center;
      align-items: center;
}
    
</style>