@datawhale/form-kit

Vue 3 表单运行时组件包，提供：

• ElementFormDetail：基于 Element Plus 的表单运行时
• VantFormDetail：基于 Vant 的表单运行时
• style.css：包内公共样式

安装

pnpm add @datawhale/form-kit

根据使用场景补充依赖：

• PC 端使用 element-plus
• H5 端使用 vant
• 运行环境使用 vue@^3.5

快速开始

import { ElementFormDetail } from '@datawhale/form-kit/element';
import '@datawhale/form-kit/style.css';

import '@datawhale/form-kit/style.css';
import { VantFormDetail } from '@datawhale/form-kit/vant';

<template>
  <ElementFormDetail
    :form-id="123"
    :query-form-detail-api="queryFormDetailApi"
    :get-user-basic-info-api="getUserBasicInfoApi"
    :upload-file-with-sts-api="uploadFileWithStsApi"
    :query-college-list-api="queryCollegeListApi"
    :query-company-list-api="queryCompanyListApi"
    :query-major-list-api="queryMajorListApi"
    :submit-form-api="submitFormApi"
    :is-login="true"
    :user-id="1"
  />
</template>

也可以通过组件实例手动触发表单提交：

<script setup lang="ts">
import { ref } from 'vue';
import { ElementFormDetail, type FormDetailExposed } from '@datawhale/form-kit/element';

const formRef = ref<FormDetailExposed>();

const submitForm = async () => {
  await formRef.value?.submit();
};
</script>

详细文档

• form-kit 接入指南

上传题配置

如果表单中包含上传题，宿主项目必须提供：

• VITE_OSS_BUCKET
• VITE_OSS_ENDPOINT

也可以通过组件 props 传入 ossBucket、ossEndpoint，并覆盖环境变量。

开发

pnpm --filter @datawhale/form-kit build
pnpm --filter @datawhale/form-kit type-check

License

MIT