yudada-form

基于 Vue 3 + Element Plus 的配置驱动动态表单组件。

安装

pnpm add yudada-form

同时确保你的项目已安装并注册 Element Plus：

pnpm add element-plus

使用

全局注册（推荐）

import { createApp } from "vue";
import ElementPlus from "element-plus";
import YudadaForm from "yudada-form";
import "element-plus/dist/index.css";

import App from "./App.vue";

const app = createApp(App);
app.use(ElementPlus);
app.use(YudadaForm);
app.mount("#app");

模板中直接使用：

<yudada-form :config="formConfig" v-model="formData" />

从 0.1.2 起，组件样式会随 JS 自动注入；一般不需要再手动 import "yudada-form/style.css"。

局部引入

import { YudadaForm } from "yudada-form";

<template>
  <YudadaForm v-model="formData" :config="formConfig" />
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";
import { YudadaForm } from "yudada-form";

export default defineComponent({
  components: { YudadaForm },
  setup() {
    const formData = ref({});
    const formConfig = ref([
      {
        label: "用户名",
        type: "input",
        model: "username",
        required: true,
      },
    ]);

    return {
      formData,
      formConfig,
    };
  },
});
</script>

本地示例与快速开始

• 示例组件：仓库根目录下的 example.vue，包含一个可运行的表单示例（基础字段、数字输入、选择、动态显示等）。
• 详细配置文档：同目录下的 QUICK_START.md，涵盖常用字段类型、校验、分组、动态显隐等用法。

在你的业务页面中也可以直接参考 example.vue 的写法，将表单配置拷贝或按需裁剪即可。

关键 Props

• config: Array / Object（支持分组）
• v-model: 表单数据对象（modelValue）
• customComponentMap: 扩展/覆盖内置组件映射（解决你项目里 gj-* 这类自定义组件）

示例：

const customComponentMap = {
  "map-select": MyMapSelect
};

<yudada-form :config="formConfig" v-model="formData" :custom-component-map="customComponentMap" />

构建与发布

pnpm i
pnpm build

发布到 npm（或私服）：

npm login
npm publish