更新记录

0.01（2026-09-23） 下载此版本

更新日志

• 修复 v-if/v-else-if 链断裂导致多渲染输入框的问题
• 修复 select 单选渲染为 radio 平铺、占用过多空间的问题
• 修复 getModel 对展示类元素写入 undefined 的问题
• 修复 getRules 对所有字段生成无效 0~999999999 长度规则的问题
• 修复 formRef 声明位置导致 setRules 调用时 TDZ 报错
• 修复 el-alert 条件判断 || 'elAlert' 永真导致元素被吞
• 新增 upload afterRead 自动上传到后端接口
• 新增 select 单选 ActionSheet 底部选择器
• 新增 value 默认值初始化
• 新增 hidden/display 字段隐藏
• 新增 validate 自定义校验规则透传
• 新增 info 提示信息显示
• 新增 $required 必填星标
• 新增 errorType 默认显示表单项下方错误提示
• 样式适配深色主题（CSS 变量）

平台兼容性

uni-app(5.24)

其他

form-create-uni

基于 form-create 规则的 uni-app 动态表单渲染组件，使用 uview-plus 组件库渲染，支持 H5 / App / 小程序多端。

适用于：Web 端用 form-create FcDesigner 设计表单 JSON，uni-app 端用本组件直接渲染同一份规则，无需二次开发。

特性

• 兼容 form-create v3 规则格式（rule + option），与 FcDesigner 设计器产物直接对接
• 基于 uview-plus 渲染，风格统一，主题适配
• 支持 18+ 字段类型：输入框、计数器、单选、复选、开关、日期选择、时间选择、滑块、评分、富文本、上传、文字、分割线、提示、按钮、间距等
• 内置表单校验：必填星标、长度限制、自定义 validate 规则、表单项下方红色错误提示
• select 单选用底部 ActionSheet 弹出选择器，选项多时不占空间
• upload 自动上传到后端接口，支持鉴权 header
• 支持 value 默认值、hidden/display 字段隐藏、info 提示信息
• 兼容小驼峰命名（elAlert / el-alert 均可识别）

依赖

• uview-plus（Vue 3 + uni-app）
• Vue 3

安装

将 form-create-uni 目录放入项目的 uni_modules 目录即可，easycom 自动注册。

快速使用

<template>
    <view>
        <form-create-uni
            ref="formCreateRef"
            :option="option"
            :uploadConfig="uploadConfig"
            @submit="onSubmit"
        />
    </view>
</template>

<script setup>
import { ref, onMounted } from 'vue'

const formCreateRef = ref()
const option = ref({})
const uploadConfig = {
    baseURL: 'https://your-api.com',
    token: 'your-token'
}

onMounted(() => {
    // rule 和 option 来自 form-create FcDesigner 的 toJson() 结果
    const formJson = {
        rule: [
            {
                type: 'input',
                field: 'title',
                title: '标题',
                value: '',
                $required: true,
                info: '请输入活动标题',
                props: { placeholder: '请输入标题' }
            },
            {
                type: 'select',
                field: 'category',
                title: '分类',
                $required: true,
                options: [
                    { label: '海报', value: 'poster' },
                    { label: 'Banner', value: 'banner' },
                    { label: '主图', value: 'product' }
                ]
            },
            {
                type: 'upload',
                field: 'image',
                title: '商品图',
                $required: true,
                info: '优先上传PNG透明商品图',
                props: { multiple: false, limit: 1 }
            },
            {
                type: 'elAlert',
                props: { title: '上传后可自动抠图', type: 'success' }
            }
        ],
        option: {
            form: { labelPosition: 'left', labelWidth: '100px' },
            submitBtn: { show: true, innerText: '提交' }
        }
    }

    option.value = formJson.option
    formCreateRef.value.showForm(formJson.rule)
})

const onSubmit = (formData) => {
    // formData 为规则数组，填写值挂在 ele.values 上
    console.log('提交数据:', formData)
}
</script>

API

Props

Events

Expose

支持的字段类型

规则属性

上传说明

upload 类型字段的文件会自动上传到后端，需要通过 uploadConfig 传入接口地址和鉴权 token：

const uploadConfig = {
    baseURL: 'https://your-api.com',  // 接口基础地址
    token: 'user-jwt-token'           // 鉴权令牌（可选）
}

上传接口固定为 POST {baseURL}/common/upload，返回格式需兼容：

{
    "code": 200,
    "fileName": "/profile/upload/2026/09/22/xxx.png"
}

上传成功后，fileList 中的 url 会自动替换为服务器返回的完整网络地址。

主题适配

组件样式使用 CSS 变量适配深色模式，以下变量需在项目全局定义：

如果项目未定义这些变量，组件仍可正常使用，只是颜色不会跟随主题切换。

注意事项

• colorPicker 类型依赖 uv-ui 的 uv-pick-color 组件，未安装时点击会提示「颜色选择器未安装」
• select 单选使用 uni.showActionSheet 原生底部选择器，选项数量不宜超过 10 个
• 联动规则（control）和动态更新（update）暂不支持
• 规则中的 elAlert（小驼峰）和 el-alert（短横线）两种写法均可识别
• upload 必须使用 v-model:fileList（u-upload 用 fileList prop，不是默认 modelValue）
• 自定义 validate 规则中的 pattern 支持字符串（自动转为 RegExp）或 RegExp 对象

更新日志

• 修复 u-upload 绑定：v-model 改为 v-model:fileList（u-upload 用 fileList prop 而非 modelValue，否则无回显）
• 修复 upload 初始值非数组导致 fileList.map is not a function 崩溃
• 修复上传后无回显：本地临时路径无图片后缀被误判为非图片，显式设 isImage:true + thumb
• 修复单文件模式 event.file 为对象导致 forEach 崩溃，用 [].concat 归一为数组
• 修复上传后 in-place 改 url 不触发重渲染，改为整体替换数组
• 修复必填校验 type:'string' 写死导致数字/数组/布尔字段误判，改为按字段类型动态设置（number/boolean/array/string）
• 修复 maxlength 长度规则对数字/数组字段无效校验，仅字符串类型生效
• 修复自定义 validate 中 pattern 为字符串时不生效，自动转为 RegExp
• 修复 v-if/v-else-if 链断裂导致多渲染输入框的问题
• 修复 select 单选渲染为 radio 平铺、占用过多空间的问题
• 修复 getModel 对展示类元素写入 undefined 的问题
• 修复 getRules 对所有字段生成无效 0~999999999 长度规则的问题
• 修复 formRef 声明位置导致 setRules 调用时 TDZ 报错
• 修复 el-alert 条件判断 || 'elAlert' 永真导致元素被吞
• 新增 upload afterRead 自动上传到后端接口
• 新增 select 单选 ActionSheet 底部选择器
• 新增 value 默认值初始化
• 新增 hidden/display 字段隐藏
• 新增 validate 自定义校验规则透传
• 新增 info 提示信息显示
• 新增 $required 必填星标
• 新增 errorType 默认显示表单项下方错误提示
• 样式适配深色主题（CSS 变量）