vue3中使用el-form

template

<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

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)
}
})
}

  

 

上一篇:Django组件-forms组件


下一篇:IIS部署python运行环境-晒酷学院