Package Exports

@sloth-form/element-plus
@sloth-form/element-plus/dist/index.js
@sloth-form/element-plus/dist/index.umd.cjs

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (@sloth-form/element-plus) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

Sloth-Form

如树懒般慵懒的构建表单,简化表单创建流程. 基于Vue 3和Element Plus的表单生成器，让表单构建变得简单高效。

English | 简体中文

特性

🚀 简单易用 - 使用JSON配置生成表单，无需手动编写重复代码
📦 组件丰富 - 支持Element Plus的所有表单组件
🛠️ 灵活定制 - 支持自定义组件注册、丰富的插槽配置
🔍 完整类型定义 - 使用TypeScript开发，提供完整类型提示
📱 响应式布局 - 支持灵活的栅格布局

安装

# npm
npm install @sloth-form/element-plus

# yarn
yarn add @sloth-form/element-plus

# pnpm
pnpm add @sloth-form/element-plus

快速开始

<template>
  <Form v-model="formData" :items="formItems" />
</template>

<script setup lang="ts">
import { Form } from '@sloth-form/element-plus'
import { ref } from 'vue'

const formData = ref({})
const formItems = [
  {
    prop: 'name',
    label: '姓名',
    type: 'input',
    rules: [{ required: true, message: '请输入姓名', trigger: 'blur' }]
  },
  {
    prop: 'gender',
    label: '性别',
    type: 'select',
    options: [
      { label: '男', value: 'male' },
      { label: '女', value: 'female' }
    ]
  }
]
</script>

表单配置

表单项属性

属性	说明	类型	默认值
prop	表单域字段名	string	-
label	标签文本	string	-
type	表单项类型	string	'input'
span	栅格占据的列数	number (1-24)	24
show	是否显示	boolean	true
value	默认值	any	''
options	选项配置（用于select等组件）	Array	[]
rules	校验规则	Array	-
attrs	传递给表单控件的属性	Object	{}
itemSlots	表单项插槽	Object	{}
widgetSlots	控件插槽	Object	{}

表单实例方法

您可以通过ref获取表单实例，访问以下属性和方法：

formRef: Element Plus的表单实例引用
formItemsRefs: 所有表单项的实例引用
widgetRefs: 所有表单控件的实例引用

自定义组件

import { formControllerManager } from '@sloth-form/element-plus'
import MyComponent from './MyComponent.vue'

// 注册自定义组件
formControllerManager.register('my-component', MyComponent)

开发贡献

# 安装依赖
pnpm install

# 开发模式
pnpm dev

# 构建库
pnpm build:lib

# 运行测试
pnpm test

许可证

MIT