<script setup>
import {reactive, ref} from "vue";const formRef=ref()
const formModel=reactive({username:'',password:''
})
const formRules=reactive({username:[{required:true,message:'请输入账号',trigger:'blur'}],password:[{required:true,message:'请输入密码',trigger:'blur'}]
})// 登录按钮
async function login(){// 校验登录表单await formRef.value.validate()
}// 重置按钮
function reset(){formRef.value.resetFields()
}
</script><template><div class="layout"><el-card><el-form ref="formRef" :model="formModel" :rules="formRules"><el-form-item prop="username"><el-input placeholder="账号" clearable v-model="formModel.username"></el-input></el-form-item><el-form-item prop="password"><el-input placeholder="密码" clearable v-model="formModel.password"></el-input></el-form-item><el-form-item><el-button type="primary" style="width: 100%" @click="login">登录</el-button></el-form-item><el-form-item><el-button plain type="default" style="width: 100%" @click="reset">重置</el-button></el-form-item></el-form></el-card></div>
</template><style lang="scss" scoped>
.layout{height: 100vh;width: 100vw;background-image: url("public/login-bg.png");background-repeat: no-repeat;background-size: cover;.el-card{width: 300px;position: fixed;left: 50%;top: 50%;transform: translate(-50%,-50%);}
}
</style>