# ConfigForm 可配置表单组件

一个基于 Vue 3 和 Element Plus 的功能强大的可配置表单组件，支持多种表单控件类型和灵活的配置选项。

## 功能特性

- 🎯 **支持多种表单控件**：输入框、选择器、单选框、复选框、日期选择器、时间选择器、数字输入框、开关、滑块、评分、颜色选择器、上传等
- 🎨 **灵活的布局配置**：支持响应式布局、自定义列宽、间距等
- ✅ **完整的表单验证**：支持自定义验证规则、异步验证等
- 🔧 **高度可配置**：每个表单项都支持丰富的配置选项
- 🎪 **支持自定义插槽**：可以插入自定义内容
- 📱 **响应式设计**：支持不同屏幕尺寸的自适应布局

## 基础用法

```vue
<template>
  <config-form
    v-model="formData"
    :config="formConfig"
    :items="formItems"
    :rules="formRules"
    @submit="handleSubmit"
  />
</template>

<script setup>
import { ref } from 'vue'
import ConfigForm from '@/components/ConfigForm.vue'

const formData = ref({
  name: '',
  age: null,
  gender: ''
})

const formConfig = {
  labelWidth: '120px',
  showButtons: true,
  submitText: '提交',
  resetText: '重置'
}

const formItems = [
  {
    type: 'input',
    prop: 'name',
    label: '姓名',
    placeholder: '请输入姓名',
    required: true
  },
  {
    type: 'number',
    prop: 'age',
    label: '年龄',
    min: 1,
    max: 120
  },
  {
    type: 'radio',
    prop: 'gender',
    label: '性别',
    options: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' }
    ]
  }
]

const formRules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ]
}

const handleSubmit = (data) => {
  console.log('表单提交:', data)
}
</script>
```

## Props

### config (表单配置)

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| labelWidth | string | '120px' | 表单标签宽度 |
| labelPosition | string | 'right' | 表单标签位置：left/right/top |
| inline | boolean | false | 是否行内表单 |
| disabled | boolean | false | 是否禁用整个表单 |
| size | string | 'default' | 表单尺寸：large/default/small |
| gutter | number | 20 | 栅格间隔 |
| showButtons | boolean | true | 是否显示操作按钮 |
| showSubmit | boolean | true | 是否显示提交按钮 |
| showReset | boolean | true | 是否显示重置按钮 |
| submitText | string | '提交' | 提交按钮文本 |
| resetText | string | '重置' | 重置按钮文本 |
| submitLoading | boolean | false | 提交按钮加载状态 |
| customButtons | array | [] | 自定义按钮配置 |

### items (表单项配置)

每个表单项都支持以下基础配置：

| 属性 | 类型 | 默认值 | 说明 |
|------|------|--------|------|
| type | string | - | 表单项类型（必填） |
| prop | string | - | 表单字段名（必填） |
| label | string | - | 表单标签 |
| placeholder | string | - | 占位符文本 |
| required | boolean | false | 是否必填 |
| disabled | boolean | false | 是否禁用 |
| readonly | boolean | false | 是否只读 |
| span | number | 24 | 栅格占位格数 |
| offset | number | 0 | 栅格左侧间隔格数 |
| xs/sm/md/lg/xl | number | - | 响应式栅格配置 |
| rules | array | - | 验证规则 |

#### 不同类型的特殊配置

##### input (输入框)
| 属性 | 类型 | 说明 |
|------|------|------|
| clearable | boolean | 是否可清空 |
| maxlength | number | 最大输入长度 |
| showWordLimit | boolean | 是否显示字数统计 |
| inputType | string | 输入框类型：text/password等 |
| rows | number | 文本域行数 |
| autosize | boolean/object | 文本域自适应高度 |
| prepend | string | 前置内容 |
| append | string | 后置内容 |
| prefix | string | 前缀图标 |
| suffix | string | 后缀图标 |

##### select (选择器)
| 属性 | 类型 | 说明 |
|------|------|------|
| clearable | boolean | 是否可清空 |
| multiple | boolean | 是否多选 |
| filterable | boolean | 是否可搜索 |
| remote | boolean | 是否远程搜索 |
| remoteMethod | function | 远程搜索方法 |
| loading | boolean | 是否加载中 |
| options | array | 选项数据 |

##### radio/checkbox (单选/复选框)
| 属性 | 类型 | 说明 |
|------|------|------|
| border | boolean | 是否显示边框 |
| options | array | 选项数据 |
| min/max | number | 复选框最少/最多选择数量 |

##### date (日期选择器)
| 属性 | 类型 | 说明 |
|------|------|------|
| dateType | string | 日期类型：date/daterange等 |
| format | string | 显示格式 |
| valueFormat | string | 绑定值格式 |
| startPlaceholder | string | 范围选择时开始日期占位符 |
| endPlaceholder | string | 范围选择时结束日期占位符 |
| disabledDate | function | 禁用日期函数 |

##### upload (上传)
| 属性 | 类型 | 说明 |
|------|------|------|
| action | string | 上传地址 |
| headers | object | 请求头 |
| multiple | boolean | 是否多选 |
| accept | string | 接受文件类型 |
| drag | boolean | 是否拖拽上传 |
| limit | number | 上传文件数量限制 |
| tip | string | 提示文本 |

## Events

| 事件名 | 参数 | 说明 |
|--------|------|------|
| update:modelValue | formData | 表单数据更新 |
| submit | formData | 表单提交 |
| reset | - | 表单重置 |
| change | prop, value | 表单项值变化 |
| input | prop, value | 输入事件 |
| focus | prop, event | 获得焦点 |
| blur | prop, event | 失去焦点 |
| validate | isValid, error | 表单验证 |

## Methods

通过 ref 可以调用以下方法：

| 方法名 | 参数 | 说明 |
|--------|------|------|
| validate | - | 验证整个表单 |
| validateField | prop | 验证指定字段 |
| clearValidate | props | 清除验证信息 |
| resetFields | - | 重置表单 |

## 完整示例

```javascript
const formItems = [
  // 基础输入框
  {
    type: 'input',
    prop: 'username',
    label: '用户名',
    placeholder: '请输入用户名',
    clearable: true,
    prefix: 'User',
    rules: [
      { required: true, message: '请输入用户名', trigger: 'blur' },
      { min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur' }
    ]
  },
  
  // 密码输入框
  {
    type: 'input',
    prop: 'password',
    label: '密码',
    inputType: 'password',
    placeholder: '请输入密码',
    showPassword: true,
    rules: [
      { required: true, message: '请输入密码', trigger: 'blur' },
      { min: 6, message: '密码长度不能少于6位', trigger: 'blur' }
    ]
  },
  
  // 数字输入框
  {
    type: 'number',
    prop: 'age',
    label: '年龄',
    min: 18,
    max: 100,
    step: 1
  },
  
  // 选择器
  {
    type: 'select',
    prop: 'city',
    label: '城市',
    placeholder: '请选择城市',
    clearable: true,
    filterable: true,
    options: [
      { label: '北京', value: 'beijing' },
      { label: '上海', value: 'shanghai' },
      { label: '广州', value: 'guangzhou' },
      { label: '深圳', value: 'shenzhen' }
    ]
  },
  
  // 级联选择器
  {
    type: 'cascader',
    prop: 'region',
    label: '地区',
    options: regionOptions,
    props: {
      value: 'code',
      label: 'name',
      children: 'children'
    }
  },
  
  // 单选框
  {
    type: 'radio',
    prop: 'gender',
    label: '性别',
    border: true,
    options: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' }
    ]
  },
  
  // 复选框
  {
    type: 'checkbox',
    prop: 'hobbies',
    label: '爱好',
    options: [
      { label: '读书', value: 'reading' },
      { label: '运动', value: 'sports' },
      { label: '音乐', value: 'music' },
      { label: '旅行', value: 'travel' }
    ]
  },
  
  // 开关
  {
    type: 'switch',
    prop: 'status',
    label: '状态',
    activeText: '启用',
    inactiveText: '禁用',
    activeValue: 1,
    inactiveValue: 0
  },
  
  // 滑块
  {
    type: 'slider',
    prop: 'score',
    label: '分数',
    min: 0,
    max: 100,
    step: 5,
    showStops: true
  },
  
  // 评分
  {
    type: 'rate',
    prop: 'rating',
    label: '评分',
    max: 5,
    showText: true,
    texts: ['很差', '较差', '一般', '推荐', '非常推荐']
  },
  
  // 日期选择器
  {
    type: 'date',
    prop: 'birthday',
    label: '生日',
    valueFormat: 'YYYY-MM-DD'
  },
  
  // 日期范围选择器
  {
    type: 'date',
    prop: 'dateRange',
    label: '日期范围',
    dateType: 'daterange',
    startPlaceholder: '开始日期',
    endPlaceholder: '结束日期'
  },
  
  // 时间选择器
  {
    type: 'time',
    prop: 'workTime',
    label: '工作时间',
    valueFormat: 'HH:mm:ss'
  },
  
  // 颜色选择器
  {
    type: 'color',
    prop: 'themeColor',
    label: '主题色',
    showAlpha: true,
    predefine: ['#409EFF', '#67C23A', '#E6A23C', '#F56C6C']
  },
  
  // 文本域
  {
    type: 'textarea',
    prop: 'description',
    label: '描述',
    placeholder: '请输入描述',
    rows: 4,
    maxlength: 500,
    showWordLimit: true
  },
  
  // 上传
  {
    type: 'upload',
    prop: 'avatar',
    label: '头像',
    action: '/api/upload',
    accept: 'image/*',
    limit: 1,
    tip: '只能上传jpg/png文件，且不超过2MB'
  },
  
  // 自定义插槽
  {
    type: 'slot',
    prop: 'customField',
    label: '自定义字段',
    slotName: 'customSlot'
  }
]
```

## 注意事项

1. **表单数据绑定**：使用 `v-model` 双向绑定表单数据
2. **验证规则**：支持在 `rules` prop 中定义全局规则，也可以在每个表单项中单独定义
3. **响应式布局**：使用 Element Plus 的栅格系统，支持 `xs/sm/md/lg/xl` 响应式配置
4. **自定义插槽**：通过 `type: 'slot'` 可以插入自定义内容
5. **文件上传**：需要配合后端接口实现文件上传功能

这个组件提供了表单开发中所需的大部分功能，通过配置化的方式可以快速构建各种类型的表单。