兔兔：vue3封装表单组件

你可以按照以下思路创建一个可配置的表单组件，它支持 input、select、time 和 slot 四种类型的表单元素。你只需传递一个数组，数组中的每一项包含 title、value 和 type，对应生成不同的表单控件。

下面是基于 Vue 3 和 Element Plus 的实现代码：

<template>
  <el-form :model="formData" label-width="100px">
    <el-form-item
      v-for="(item, index) in formConfig"
      :key="index"
      :label="item.title"
    >
      <!-- 根据 type 渲染不同的表单元素 -->
      <component
        :is="getComponentType(item.type)"
        v-model="formData[item.value]"
        v-if="item.type !== 'slot'"
        v-bind="item.props || {}"
      >
      </component>

      <!-- 自定义插槽 -->
      <slot v-else :name="item.value"></slot>
    </el-form-item>
  </el-form>
</template>

<script setup>
import { ref } from 'vue'

// 父组件传递的配置数组
const formConfig = [
  { title: '用户名', value: 'username', type: 'input' },
  { title: '性别', value: 'gender', type: 'select', props: { placeholder: '选择性别', options: [{label: '男', value: 'male'}, {label: '女', value: 'female'}]} },
  { title: '出生日期', value: 'birthdate', type: 'time', props: { placeholder: '选择日期', type: 'date' } },
  { title: '自定义项', value: 'customSlot', type: 'slot' },
]

// 表单数据
const formData = ref({
  username: '',
  gender: '',
  birthdate: '',
})

// 根据 type 返回相应的 Element Plus 组件名
const getComponentType = (type) => {
  switch (type) {
    case 'input':
      return 'el-input'
    case 'select':
      return 'el-select'
    case 'time':
      return 'el-date-picker'
    default:
      return ''
  }
}
</script>

说明：

• formConfig：是传递的表单配置数组，包含 title（表单项的标签）、value（表单数据字段名）、type（表单项类型），以及 props（其他传递给表单元素的属性）。
• getComponentType：根据表单项的类型，返回对应的 Element Plus 组件名。
• slot 插槽：对于 type 为 slot 的表单项，可以通过插槽来自定义内容。

使用示例：

<template>
  <FormComponent>
    <!-- 插槽自定义表单项 -->
    <template #customSlot>
      <el-input v-model="formData.customSlot" placeholder="自定义输入"></el-input>
    </template>
  </FormComponent>
</template>

<script setup>
import FormComponent from './FormComponent.vue'

const formData = {
  customSlot: ''
}
</script>

这样你可以根据需求传入数组来生成动态的表单，同时也支持通过插槽进行自定义内容。