vue3封装form表单，功能齐全

Vue 3提供了Composition API，可以更方便地封装组件。下面是一个简单的封装Form表单的例子，包含了表单验证、提交等功能。

<template>
  <form @submit.prevent="submit">
    <slot :fields="fields" :errors="errors"></slot>
    <button type="submit">提交</button>
  </form>
</template>

<script>
import { ref, reactive } from 'vue';

export default {
  props: {
    initialValues: Object,
    validate: Function,
    onSubmit: Function,
  },
  setup(props, { emit }) {
    const fields = ref({});
    const errors = reactive({});

    const setFieldValue = (name, value) => {
      fields.value[name] = value;
      if (props.validate) {
        validateField(name);
      }
    };

    const validateField = (name) => {
      if (props.validate) {
        const error = props.validate(name, fields.value);
        errors[name] = error;
      }
    };

    const validateAllFields = () => {
      Object.keys(fields.value).forEach((name) => {
        validateField(name);
      });
    };

    const submit = () => {
      validateAllFields();
      if (Object.keys(errors).length === 0) {
        emit('submit', fields.value);
        if (props.onSubmit) {
          props.onSubmit(fields.value);
        }
      }
    };

    if (props.initialValues) {
      Object.keys(props.initialValues).forEach((name) => {
        fields.value[name] = props.initialValues[name];
      });
    }

    return {
      fields,
      errors,
      setFieldValue,
      validateField,
      validateAllFields,
      submit,
    };
  },
};
</script>

在使用时，可以通过插槽(slot)来添加表单字段：

<template>
  <Form :validate="validate" @submit="handleSubmit">
    <template #default="{ fields, errors }">
      <div>
        <label>姓名：</label>
        <input v-model="fields.name" @input="setFieldValue('name', $event.target.value)">
        <span v-if="errors.name">{{ errors.name }}</span>
      </div>
      <div>
        <label>邮箱：</label>
        <input v-model="fields.email" @input="setFieldValue('email', $event.target.value)">
        <span v-if="errors.email">{{ errors.email }}</span>
      </div>
    </template>
  </Form>
</template>

<script>
import Form from './Form.vue';

export default {
  components: { Form },
  data() {
    return {
      initialValues: {
        name: '',
        email: '',
      },
    };
  },
  methods: {
    validate(name, fields) {
      if (name === 'name' && !fields[name]) {
        return '姓名不能为空';
      }
      if (name === 'email' && !fields[name]) {
        return '邮箱不能为空';
      }
      if (name === 'email' && !/^\w+@[a-zA-Z_]+?\.[a-zA-Z]{2,3}$/.test(fields[name])) {
        return '邮箱格式不正确';
      }
    },
    handleSubmit(fields) {
      console.log(fields);
    },
  },
};
</script>

这个例子中，我们在Form组件中定义了一些常用的方法和属性，如`fields`表示表单中所有字段的值，`errors`表示表单中所有字段的错误信息，`setFieldValue`用于设置字段的值，`validateField`用于验证单个字段的值，`validateAllFields`用于验证所有字段的值，`submit`用于提交表单。

在使用时，我们通过插槽(slot)来添加表单字段，同时可以在Form组件上设置`validate`和`onSubmit`等属性，实现表单验证和提交功能。