<template>
? ? <div>
? ? ? ? ?<el-form :model="form" :rules="rules" ref="form" label-width="140px">
? ? ? ? ? <el-form-item label="用戶名" prop="username">
? ? ? ? ? ?<el-input v-model="form.username" placeholder="請輸入用戶名"></el-input>
? ? ? ? ? </el-form-item>
? ? ? ? ? <el-form-item label="密碼" prop="password">
? ? ? ? ? ? <el-input type="password" v-model="form.password" placeholder="請輸入密碼"
? ? ? ? ? ? ></el-input>
? ? ? ? ? </el-form-item>
? ? ? ? ? <el-form-item>
? ? ? ? ? ? <el-button type="primary" @click="submit('form')">提交</el-button>
? ? ? ? ? ? <el-button @click="reset('form')">取消</el-button>
? ? ? ? ? </el-form-item>
? ? ? ? </el-form>
? ? <div>
</template>
<script>
export default {
? ? data() {
? ? ? ? let validatePwd ?= (rule, value, callback) => {
? ? ? ? ? ? // 密碼校驗
? ? ? ? }
? ? ? ? return {
? ? ? ? ? ? form: {
? ? ? ? ? ? ? ? username: '',
? ? ? ? ? ? ? ? password: ''
? ? ? ? ? ? },
? ? ? ? ? ? ?rules: {
? ? ? ? ? ? ? ? username: [{ required: true, message: '請輸入用戶名', trigger: 'blur'}],
? ? ? ? ? ? ? ? password: [{ required: true, validator: validatePwd, trigger: 'blur'}]
? ? ? ? ? ? }
? ? ? ? }
? ? },
? ? watch: {
? ? ? ? 'form.password'(newVal, oldVal) {
? ? ? ? ? ? if(newVal, oldVal) {
? ? ? ? ? ? ? ? ? this.$refs['form'].clearValidate('password');
? ? ? ? ? ? }
? ? ? ? }
? ? }
?
}
</script>

export const initFormState = {
? ? username: '',
? ? password: ''
}
?
const validatePwd = (rule, value, callback) => {
? ? // 密碼校驗
}
?
export const formStateRules = {
? ? username: [
? ? ? ? { required: true, message: '請輸入用戶名', trigger: 'blur'}
? ? ],
? ? password: [
? ? ? ? { required: true, validator: validatePwd, trigger: 'blur'}
? ? ]
}

import { onMounted, reactive, ref, watch } from "@vue/composition-api";
import { initFormState} from './service.ts';
?
export default defineComponent({
? ? setup (prop,{root}) {
? ? ?
? ? ? ? const formState= reactive({
? ? ? ? ? ? ...initFormState, // 從service引入進來
? ? ? ? })
?
? ? ? ? const formRef = ref(null);
? ? ? ??
? ? ? ? const submit = () ?=> {
? ? ? ? ? ? // 表單校驗
? ? ? ? ? ? const formValidate = await new Promise(resolve => {
? ? ? ? ? ? ? ? (formRef as any).value.validate((valid: boolean) => resolve(valid));
? ? ? ? ? ? });
?
? ? ? ? ? ? if(!formValidate) return;
? ? ? ? ? ? // 表單校驗通過后進行的邏輯
? ? ? ? }
?
? ? ? ? const reset = () => {
? ? ? ? ? ? ?Object.keys(formState).map((key: string) => formState[key] = (initFormState as any)[key]);
? ? ? ? }
? ??
? ? ? ? // 監(jiān)控password， 按需移除錯誤提示信息
? ? ? ?watch(() => formState.password, ()=> {
? ? ? ? ? ?const result = formState.password;
? ? ? ? ? ? if(result) {
? ? ? ? ? ? ? ? (formRef as any).value.clearValidate('password')
? ? ? ? ? ? }
? ? ? ? })
? ? ? ? return {
? ? ? ? ? ? formState,
? ? ? ? ? ? formRef,
? ? ? ? ? ? formStateRules,
? ? ? ? ? ? submit,
? ? ? ? ? ? reset
? ? ? ? }
? ??
? ? },
? ? render() {
? ? ? ? return (
? ? ? ? ? ? <div>
? ? ? ? ? ? ? ? <el-form?
? ? ? ? ? ? ? ? ? ? ref="formRef"?
? ? ? ? ? ? ? ? ? ? form={this.formState}?
? ? ? ? ? ? ? ? ? ? props={{model: this.formState}}
? ? ? ? ? ? ? ? ? ? rules={formStateRules} ?label-width="140px">
? ? ? ? ? ? ? ? ? <el-form-item label="用戶名" prop="username">
? ? ? ? ? ? ? ? ? ? ? ?<el-input v-model={this.formState.username} placeholder="請輸入用戶名"></el-input>
? ? ? ? ? ? ? ? ? </el-form-item>
? ? ? ? ? ? ? ? ? <el-form-item label="密碼" prop="password">
? ? ? ? ? ? ? ? ? ? <el-input type="password" v-model={this.formState.password} placeholder="請輸入密碼"></el-input>
? ? ? ? ? ? ? ? ? </el-form-item>
? ? ? ? ? ? ? ? ? <el-form-item>
? ? ? ? ? ? ? ? ? ? <el-button type="primary" onClick={this.submit}>提交</el-button>
? ? ? ? ? ? ? ? ? ? <el-button onClick={this.reset}>取消</el-button>
? ? ? ? ? ? ? ? ? </el-form-item>
? ? ? ? ? ? ? ? </el-form>
? ? ? ? ? ? </div>
? ? ? ? )
? ? }
?
})