iBoot Form

一个独立的表单UI组件库，从vben 5.4.4项目中提取。vben项目路径：https://github.com/vbenjs/vue-vben-admin/tree/main

简介

Vben Form UI 是一个基于Vue 3和TypeScript的表单组件库，提供了强大的表单渲染、验证和管理功能。它使用vee-validate和zod进行表单验证，支持复杂的表单布局和交互。

特性

• 基于Vue 3和TypeScript
• 使用vee-validate和zod进行表单验证
• 支持表单布局自定义
• 支持表单项依赖关系
• 支持表单折叠/展开
• 提供完整的表单API

安装

npm install @iboot/form
# 或
yarn add @iboot/form
# 或
pnpm add @iboot/form

基本使用

<script setup lang="ts">
import { computed } from 'vue';
import { VbenForm, type VbenFormSchema, z } from '@iboot/form';

// 定义表单结构
const formSchema = computed((): VbenFormSchema[] => {
  return [
    {
      component: 'VbenInput',
      componentProps: {
        placeholder: '请输入用户名',
      },
      fieldName: 'username',
      label: '用户名',
      rules: z.string().min(1, { message: '请输入用户名' }),
    },
    {
      component: 'VbenInputPassword',
      componentProps: {
        placeholder: '请输入密码',
      },
      fieldName: 'password',
      label: '密码',
      rules: z.string().min(6, { message: '密码至少6位' }),
    },
  ];
});

// 表单提交处理
function onSubmit(values) {
  console.log('表单提交:', values);
}
</script>

<template>
  <VbenForm
    :form-schema="formSchema"
    @submit="onSubmit"
  />
</template>

高级用法

使用useVbenForm

<script setup lang="ts">
import { useVbenForm, z } from '@iboot/form';

const [Form, formApi] = useVbenForm({
  schema: [
    {
      component: 'VbenInput',
      fieldName: 'username',
      label: '用户名',
      rules: z.string().min(1),
    },
  ],
});

// 使用formApi进行表单操作
function resetForm() {
  formApi.resetFields();
}

function submitForm() {
  formApi.submit();
}
</script>

<template>
  <Form @submit="console.log" />
  <button @click="resetForm">重置</button>
  <button @click="submitForm">提交</button>
</template>

自定义组件

您可以通过setupVbenForm方法注册自定义组件：

import { setupVbenForm } from '@iboot/form';
import MyCustomComponent from './MyCustomComponent.vue';

setupVbenForm({
  config: {
    componentMap: {
      MyCustomComponent,
    },
  },
});

依赖项

• Vue 3
• vee-validate
• zod
• @vueuse/core

许可证

MIT