快速上手

这是一个简单的表单组件

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

安装

建议 node >= 16.20.0
vue3.0+

npm install turbo-form-vue

使用示例

// 引入自定义组件
import TurboForm from 'turbo-form-vue'
// 引入组件样式
import 'turbo-form-vue/style.css'

app.use(TurboForm)

<template>
  <TurboForm
    :form-list="formList"
    :disabled="true"
  />
</template>

<script setup lang="ts">

const formList = [
  {
    label: '基础身份信息',
    type: "Title",
    span: 24,
  },
  {
    label: '姓名',
    prop: "name",
    type: "Input",
    span: 12,
  },
  {
    label: "基础身份信息",
    prop: "gender",
    type: "Select",
    option: [
      { label: '男', value: '0' },
      { label: '女', value: '1' },
    ]
  },
  {
    label: '年龄',
    prop: "age",
    type: "Input",
    span: 12,
    // 是否显示该组件，参数是表单对象
    // hidden: (data: any) => {
    //   return data.gender === '0'
    // }
  }
]

<style lang="scss" scoped></style>

formList配置

formList：接收一个数组，接口为下面所示

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

组件实例对象

| 属性名 | 说明 | 类型 | 参数 | 返回值 | | -------|----|-----|---------|-------| |formData| 返回比哦啊单绑定对象 | Object | -- | -- | |setForm| 设置表单属性 | Function | 接收一个对象 | -- | |getFormRef| 返回表单对象 | Function | -- | ElForm实例 |