Vant 组件二次封装：用 TypeScript 封装业务表单与类型安全校验

<script setup lang="ts">
import { computed, ref } from 'vue';
import type { FieldRule } from '@/utils/rules';

defineOptions({ inheritAttrs: false }); // 不让属性自动落到根元素

interface Props {
  label: string;
  name: string;
  required?: boolean;
  rules?: FieldRule[];
}
const props = withDefaults(defineProps<Props>(), {
  required: false,
  rules: () => [],
});
const model = defineModel<string>({ default: '' });

const mergedRules = computed<FieldRule[]>(() =>
  props.required
    ? [{ required: true, message: `请填写${props.label}` }, ...props.rules]
    : props.rules
);

const fieldRef = ref<{ focus?: () => void; validate?: () => Promise<void> } | null>(null);
const focus = () => fieldRef.value?.focus?.();
const validate = () => fieldRef.value?.validate?.() ?? Promise.resolve();
defineExpose({ focus, validate });
</script>

<template>
  <van-field
    ref="fieldRef"
    v-bind="$attrs"
    :model-value="model"
    :label="label"
    :name="name"
    :rules="mergedRules"
    @update:model-value="model = $event"
  >
    <template #label v-if="$slots.label"><slot name="label" /></template>
    <template #input v-if="$slots.input"><slot name="input" /></template>
    <template #right-icon v-if="$slots['right-icon']"><slot name="right-icon" /></template>
  </van-field>
</template>

export interface FieldRule {
  required?: boolean;
  message?: string;
  pattern?: RegExp;
  validator?: (value: unknown) => boolean | Promise<boolean>;
}

export const rules = {
  required: (label: string): FieldRule => ({
    required: true,
    message: `请填写${label}`,
  }),
  phone: {
    pattern: /^1[3-9]\d{9}$/,
    message: '请输入正确的手机号',
  } satisfies FieldRule,
  length: (min: number, max: number): FieldRule => ({
    validator: (v) => {
      const n = String(v ?? '').trim().length;
      return n >= min && n <= max;
    },
    message: `长度需在 ${min} ~ ${max} 个字符之间`,
  }),
  asyncUnique: (check: (value: string) => Promise<boolean>): FieldRule => ({
    validator: (v) => check(String(v ?? '')),
    message: '该值已被占用',
  }),
};

import { reactive, ref } from 'vue';

export function useVantForm<T extends Record<string, unknown>>(initial: T) {
  const formData = reactive({ ...initial }) as T;
  const submitting = ref(false);

  const reset = () => Object.assign(formData, initial);

  // van-form 的 submit 事件只在校验通过后触发，这里再包一层防重复提交
  const wrapSubmit = (handler: (values: T) => Promise<void> | void) =>
    async () => {
      if (submitting.value) return;
      submitting.value = true;
      try {
        await handler(formData);
      } finally {
        submitting.value = false;
      }
    };

  return { formData, submitting, reset, wrapSubmit };
}

<script setup lang="ts">
import { ref } from 'vue';
import { showToast } from 'vant';
import AppField from '@/components/AppField.vue';
import { rules } from '@/utils/rules';
import { useVantForm } from '@/composables/useVantForm';
import { saveProfile } from '@/api/user';

const fieldRef = ref<InstanceType<typeof AppField> | null>(null);
const { formData, submitting, reset, wrapSubmit } = useVantForm({
  phone: '',
  nickname: '',
  company: '',
});

const onSubmit = wrapSubmit(async (values) => {
  await saveProfile(values);          // values 自动推导为 { phone:string; ... }
  showToast('保存成功');
});
const onFailed = () => showToast('请检查标红字段');
</script>

<template>
  <van-form @submit="onSubmit" @failed="onFailed">
    <van-cell-group inset>
      <AppField
        ref="fieldRef"
        v-model="formData.phone"
        label="手机号" name="phone" required
        :rules="[rules.phone]"
        placeholder="请输入 11 位手机号" maxlength="11" type="tel"
      />
      <AppField
        v-model="formData.nickname"
        label="昵称" name="nickname" required
        :rules="[rules.length(2, 16)]"
        placeholder="2 ~ 16 个字符"
      />
      <AppField v-model="formData.company" label="公司" name="company" placeholder="选填" />
    </van-cell-group>

    <div style="margin: 16px">
      <van-button round block type="primary" native-type="submit" :loading="submitting">保存</van-button>
      <van-button round block plain type="default" @click="reset">重置</van-button>
    </div>
  </van-form>
</template>