# turbo-form-vue

**Repository Path**: haoAzhu/turbo-form-vue

## Basic Information

- **Project Name**: turbo-form-vue
- **Description**: 一个 vue3 的快速生成表单组件
- **Primary Language**: Unknown
- **License**: Not specified
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2024-03-22
- **Last Updated**: 2024-10-10

## Categories & Tags

**Categories**: Uncategorized

**Tags**: Vue, TypeScript

## README

---
title: 表单组件
---

# 快速上手

这是一个简单的表单组件

渲染效果请参考官网（暂未发布，只有内网地址）

## 安装

> 建议 node >= 16.20.2  
> vue3.0+  

## 当前支持的组件

```ts
// Input
// Select
// DatePicker
// Autocomplete
// Cascader
// Radio
// Checkbox
// TreeSelect
// InputNumber
// ColorPicker
// InputRange
// # (自定义)
``` 

## 使用示例

```ts title="main.ts"

import EleganceForm from '@/components/elegance-form/index.vue'

```

```ts title="App.vue"
<template>
  <div class="form-box">
    <EleganceForm
      ref="formRef"
      :rules="rules"
      :form-list="formItems"
      :form-option="formOption"
      @load="load"
    >
      <template #center>
        <h1>插槽内容</h1>
      </template>
    </EleganceForm>
    <el-button @click="submit">
      提交
    </el-button>
  </div>
</template>

<script setup lang="ts">
import { h, ref, onMounted } from 'vue';
import EleganceForm from '@/components/elegance-form/index.vue'

const formRef = ref()
const formOption = {
  labelWidth: 100
}

const rules = {
  aaa: [
    { required: true }
  ],
  kkk: [
    { required: true }
  ]
}

const formItems = [
  {
    title: '基本信息',
    flod: true,
    formItemArr: [
      {
        label: '社区',
        prop: "aaa",
        type: "Input"
      },
      {
        label: '所属网格',
        prop: "sss",
        type: "Select",
        option: []
      },
      {
        label: '地理位置',
        prop: "jjj",
        type: "Input",
        defineCustom: () => {
          return '查看点位'
        }
      },
      {
        label: '带label插槽',
        prop: "ppp",
        type: "#",
        defineCustom: () => {
          return h('span', { style: { color: 'red' } }, '自定义内容')
        }
      },
      {
        label: '不带label插槽',
        type: "slot",
        slotName: 'center'
      },
    ]
  },
  {
    title: '测试插槽',
    flod: true,
    type: 'slot',
    slotName: 'center',
    formItemArr: []
  },
  {
    title: '',
    formItemArr: [
      {
        label: '社区222',
        prop: "kkk",
        type: "Input"
      },
      {
        label: '所属网格222',
        prop: "lll",
        type: "Input"
      }
    ]
  }
]

const submit = () => {
  formRef.value.validate((valid: boolean) => {
    if (valid) {
      console.log('表单数据', formRef.value.formData);
    }
  })
}

// 表单加载完成事件
const load = () => {
  console.log('表单加载完成');
}

onMounted(() => {

  // formRef.value.setForm({
  //   lll: '666'
  // })

  // formRef.value.setHidden('jjj', false)

  // formRef.value.setDropDown('sss', [
  //   { label: '666', value: '666' },
  //   { label: '777', value: '777' }
  // ])
})
</script>

<style scoped></style>

```

## 组件接收的 Prop

| 属性名 | 说明 | 类型 | 参数 | 返回值 |
| -------|----|-----|---------|-------|
|formList| 组件列表 | Array | -- | -- |
|disabled| 是否禁用表单（单个组件的禁用权限最大） | Boolean | -- | -- |
|rules| 表单校验规则 | Object | -- | -- |
|form-option| 表单本身绑定的属性 | Object | -- | -- |

## formList配置

**formList：接收一个数组，接口为下面所示**
```ts
/**
 * @label 显示名称
 * @prop 绑定属性
 * @type 表单组件类型
 * @model 默认值
 * @span 单个组件默认占比
 * @option 下拉列表数据，此属性只有下拉组件才有
 * @hidden 是否显示该组件，有唯一参数是当前表单绑定的对象
 * @change 该表单值发生变化时的事件
 * @events 一个对象，可写属性为当前组件支持的事件
 * @itemAttrs 当前组件支持的所有属性
 * @formItem 此属性为表单 Item 支持的所有属性
 * @defineCustom 自定义内容，接收h函数
*/
export interface formItemType {
  label: string;
  prop?: string;
  type: string;
  model?: any;
  span?: number;
  option?: any[];
  hidden?: boolean;
  change?: <T>(data: T) => void;
  events?: any;
  itemAttrs?: any;
  formItem?: any;
  defineCustom?: any
}


/**
 * @title 标题
 * @flod 是否折叠
 * @type 模块类型
 * @slotName 插槽名称
 * @formItem 表单item数组
*/
export interface itemListType {
  title: string;
  type?: string;
  slotName?: string;
  flod?: boolean;
  formItemArr: formItemType[];
}
```

## 自定义内容语法
```ts
const formItems = [
  {
    title: '插槽写法12',
    flod: true,
    formItemArr: [
      // 此写法有 label，接收一个 h 函数
      {
        label: '社区',
        prop: "aaa",
        type: "#",
        defineCustom: () => {
          return h('span', { style: { color: 'red' } }, '自定义内容1')
        }
      },
      // 此写法有 label，需要在组件中写插槽内容
      {
        label: '所属网格',
        prop: "bbb",
        type: "slot",
        slotName: 'slotName'
      },
    ]
  },
  {
    title: '插槽写法34',
    formItemArr: [
      // 此写法没有 label，接收一个 h 函数
      {
        label: '社区222',
        prop: "",
        type: "#",
        defineCustom: () => {
          return h('span', { style: { color: 'red' } }, '自定义内容2')
        }
      },
      // 此写法没有 label，需要在组件中写插槽内容
      {
        label: '所属网格222',
        prop: "",
        type: "slot",
        slotName: 'slotName'
      }
    ]
  },
  // 此写法不在表单内，上面几种自定义写法都在表单内
  {
    title: '插槽5',
    flod: true,
    type: 'slot',
    slotName: 'slotName',
    formItemArr: []
  },
]

```

## 组件抛出的属性

| 属性名 | 说明 | 类型 | 参数 | 返回值 |
| -------|----|-----|---------|-------|
|validate| 校验表单项 | Function | -- | 返回一个Promise结果是 boolean 类型的值 |
|formData| 返回表单绑定对象 | Object | -- | -- |
|setForm| 设置表单属性 | Function | 接收一个对象 | -- |
|setHidden| 设置表单组件的显示隐藏 | Function | 接收一个对象: {prop:string,isShow:boolean} | -- |
|setDropDown| 设置下拉框数据 | Function | prop:string,list:any[] | -- |