Ty Form Schema

一个基于 Element Plus 的 Vue 3 表单架构组件，支持动态表单配置。

安装

npm install ty-form-schema
# 或
yarn add ty-form-schema
# 或
pnpm add ty-form-schema

使用

全局注册

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import TyFormSchema from 'ty-form-schema'
import 'ty-form-schema/style'

const app = createApp(App)
app.use(ElementPlus)
app.use(TyFormSchema)
app.mount('#app')

局部引入

<template>
  <FormSchema v-model="formData" :schema="formSchema" />
</template>

<script setup lang="ts">
import { FormSchema } from 'ty-form-schema'
import 'ty-form-schema/style'
import type { FormField } from 'ty-form-schema'

const formData = reactive({
  name: '',
  type: '',
})

const formSchema: FormField[][] = [
  [
    {
      label: '名称',
      prop: 'name',
      type: 'input',
      required: true,
      placeholder: '请输入名称',
    },
    {
      label: '类型',
      prop: 'type',
      type: 'select',
      required: true,
      placeholder: '请选择类型',
      options: [
        { label: '类型1', value: 'type1' },
        { label: '类型2', value: 'type2' },
      ],
    },
  ],
]
</script>

API

Props

| 属性 | 类型 | 默认值 | 说明 | | ---------- | --------------------- | --------- | ---------------- | | modelValue | Record<string, any> | - | 表单数据对象 | | schema | FormField[][] | - | 表单字段配置 | | labelWidth | string | '120px' | 标签宽度 | | gutter | number | 20 | 列间距 | | colSpan | number | 12 | 列宽度（24栅格） |

FormField 配置

| 属性 | 类型 | 默认值 | 说明 | | ----------- | ------------------------------------------------------------- | -------- | ------------------------ | | label | string | - | 字段标签 | | prop | string | - | 字段属性名 | | type | 'input' \| 'select' \| 'password' \| 'textarea' \| 'number' | - | 字段类型 | | required | boolean | false | 是否必填 | | placeholder | string | - | 占位符文本 | | options | FieldOption[] | - | 选项列表（select类型） | | clearable | boolean | true | 是否可清空 | | filterable | boolean | false | 是否可搜索（select类型） | | multiple | boolean | false | 是否多选（select类型） | | rows | number | 3 | 行数（textarea类型） | | min | number | - | 最小值（number类型） | | max | number | - | 最大值（number类型） | | step | number | 1 | 步长（number类型） | | inputType | string | 'text' | 输入框类型 |

事件

| 事件名 | 说明 | 回调参数 | | ----------------- | ------------------ | ------------------------------ | | update:modelValue | 表单数据更新时触发 | (value: Record<string, any>) |

方法

| 方法名 | 说明 | 参数 | | ------------- | -------------- | ------------------------------ | | validate | 验证表单 | - | | clearValidate | 清除验证 | (props?: string \| string[]) | | resetFields | 重置字段 | - | | scrollToField | 滚动到指定字段 | (prop: string) |

支持的类型

• input: 文本输入框
• select: 下拉选择框
• password: 密码输入框
• textarea: 文本域
• number: 数字输入框

开发

# 安装依赖
pnpm install

# 开发模式
pnpm run dev

# 构建库
pnpm run build:lib

# 类型检查
pnpm run type-check

许可证

MIT