vue3中使用el-form

template

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

<el-form         ref="form"         :model="ruleForm"         :rules="rules"         label-width="120px"         class="demo-ruleForm" >     <el-form-item label="用户名" prop="username">         <el-input v-model="ruleFormRef.username.value" placeholder="用户名/手机号/邮箱" clearable></el-input>     </el-form-item>     <el-form-item label="密码" prop="password">         <el-input v-model="ruleFormRef.password.value"  show-password placeholder="密码" clearable></el-input>     </el-form-item> </el-form> <el-button type="primary" @click="login">登录</el-button> <el-button type="text" @click="goRegister">去注册</el-button>

　　

ts

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28

const ruleForm = reactive({     username: '',     password: '', }) const ruleFormRef = toRefs(ruleForm) const rules = reactive({     username: [         {             required: true,             message: '请输入用户名/手机号/邮箱',             trigger: 'change',         },],     password: [         {             required: true,             message: '请输入密码',             trigger: 'change',         },], }) const form = ref(null); const login = () => {     const myForm = form.value as any;     myForm.validate((valid: boolean) => {         if (valid) {             loginSubmit(ruleForm)         }     }) }