# DynamicForm 动态表单组件

一个通用的动态表单组件，支持多种输入类型和灵活的配置。

## 功能特性

- 🎯 **多种输入类型**：支持数字、文本、选择器、日期、开关、单选框、复选框、滑块等
- 🔧 **灵活配置**：支持自定义验证规则、占位符、禁用状态等
- 📱 **响应式布局**：支持自定义列数和间距
- 🎨 **自定义插槽**：支持自定义输入组件
- 📊 **数据绑定**：支持 v-model 双向绑定
- 🔍 **类型安全**：完整的 TypeScript 类型定义

## 基础用法

```vue
<template>
  <DynamicForm
    v-model="formData"
    :items="formItems"
    title="用户信息"
    @form-change="handleFormChange"
  />
</template>

<script setup>
import DynamicForm, { 
  createNumberItem, 
  createTextItem, 
  createSelectItem 
} from '@/components/DynamicForm'

const formData = ref({})

const formItems = [
  createTextItem('name', '姓名', { required: true }),
  createNumberItem('age', '年龄', { min: 0, max: 120 }),
  createSelectItem('gender', '性别', [
    { label: '男', value: 'male' },
    { label: '女', value: 'female' }
  ])
]

const handleFormChange = (value) => {
  console.log('表单数据变化:', value)
}
</script>
```

## 支持的输入类型

### 1. 数字输入 (number)

```javascript
createNumberItem('price', '价格', {
  min: 0,
  max: 10000,
  precision: 2,
  step: 0.01,
  placeholder: '请输入价格'
})
```

### 2. 文本输入 (text/textarea)

```javascript
// 单行文本
createTextItem('name', '姓名', {
  placeholder: '请输入姓名',
  required: true
})

// 多行文本
createTextItem('description', '描述', {
  rows: 4,
  placeholder: '请输入描述'
})
```

### 3. 选择器 (select)

```javascript
createSelectItem('status', '状态', [
  { label: '启用', value: 'enabled' },
  { label: '禁用', value: 'disabled' }
], {
  placeholder: '请选择状态',
  filterable: true
})
```

### 4. 日期选择 (date)

```javascript
createDateItem('birthday', '生日', {
  dateType: 'date',
  format: 'YYYY-MM-DD',
  valueFormat: 'YYYY-MM-DD'
})
```

### 5. 开关 (switch)

```javascript
createSwitchItem('enabled', '启用状态', {
  activeText: '启用',
  inactiveText: '禁用'
})
```

### 6. 单选框组 (radio)

```javascript
createRadioItem('level', '等级', [
  { label: '初级', value: 'beginner' },
  { label: '中级', value: 'intermediate' },
  { label: '高级', value: 'advanced' }
])
```

### 7. 复选框组 (checkbox)

```javascript
createCheckboxItem('hobbies', '爱好', [
  { label: '阅读', value: 'reading' },
  { label: '运动', value: 'sports' },
  { label: '音乐', value: 'music' }
])
```

### 8. 滑块 (slider)

```javascript
createSliderItem('volume', '音量', {
  min: 0,
  max: 100,
  step: 1,
  showInput: true
})
```

## Props

| 参数 | 说明 | 类型 | 默认值 |
|------|------|------|--------|
| modelValue | 表单数据 | `Record<string, any>` | `{}` |
| items | 表单项配置 | `DynamicFormItem[]` | `[]` |
| title | 表单标题 | `string` | `''` |
| gutter | 列间距 | `number` | `16` |
| columnSpan | 列跨度 | `number` | `12` |
| formProp | 表单属性前缀 | `string` | `''` |

## Events

| 事件名 | 说明 | 参数 |
|--------|------|------|
| update:modelValue | 表单数据更新 | `(value: Record<string, any>)` |
| fieldChange | 单个字段变化 | `(key: string, value: any, item: DynamicFormItem)` |
| formChange | 整个表单变化 | `(value: Record<string, any>)` |

## Methods

| 方法名 | 说明 | 参数 | 返回值 |
|--------|------|------|--------|
| getFormData | 获取表单数据 | - | `Record<string, any>` |
| setFormData | 设置表单数据 | `data: Record<string, any>` | - |
| resetForm | 重置表单 | - | - |
| validateForm | 验证表单 | - | `boolean` |

## 自定义插槽

```vue
<template>
  <DynamicForm v-model="formData" :items="formItems">
    <template #customField="{ item, value, onChange }">
      <el-input 
        v-model="value" 
        @input="onChange"
        :placeholder="item.placeholder"
      />
    </template>
  </DynamicForm>
</template>

<script setup>
const formItems = [
  {
    key: 'customField',
    label: '自定义字段',
    type: 'custom',
    slotName: 'customField',
    placeholder: '请输入自定义内容'
  }
]
</script>
```

## 高级用法

### 条件显示

```javascript
const formItems = computed(() => {
  const items = [
    createSelectItem('type', '类型', [
      { label: '类型A', value: 'typeA' },
      { label: '类型B', value: 'typeB' }
    ])
  ]
  
  // 根据类型动态添加字段
  if (formData.value.type === 'typeA') {
    items.push(createTextItem('fieldA', '字段A'))
  } else if (formData.value.type === 'typeB') {
    items.push(createNumberItem('fieldB', '字段B'))
  }
  
  return items
})
```

### 表单验证

```javascript
const formItems = [
  createTextItem('email', '邮箱', {
    required: true,
    rules: [
      { required: true, message: '请输入邮箱', trigger: 'blur' },
      { type: 'email', message: '请输入正确的邮箱格式', trigger: 'blur' }
    ]
  })
]
```

## 类型定义

```typescript
interface DynamicFormItem {
  key: string
  label: string
  type: 'number' | 'text' | 'textarea' | 'select' | 'date' | 'time' | 'switch' | 'radio' | 'checkbox' | 'slider' | 'custom'
  placeholder?: string
  required?: boolean
  disabled?: boolean
  clearable?: boolean
  rules?: any[]
  // ... 更多配置项
}
```

## 注意事项

1. 每个表单项的 `key` 必须唯一
2. 选择器类型的表单项必须提供 `options` 配置
3. 自定义插槽类型需要指定 `slotName`
4. 表单数据会自动同步到 `v-model` 绑定的变量
5. 建议使用工具函数创建表单项，确保类型安全
