更新记录

1.0.0（2026-08-14） 下载此版本

• 首次发布：基于 uView Pro 的 JSON 规则动态表单渲染器
• 兼容 form-create / form-create-uni 规则约定
• 支持声明式（rule prop）与命令式（showForm）用法
• 内置 input / password / textarea / inputNumber / radio / checkbox / select / cascader / switch / datePicker / timePicker / dateRange / timeRange / slider / rate / upload / color / transfer / tree / treeSelect / editor / signature 等字段类型

平台兼容性

uni-app(5.15)

其他

form-create-uviewPro

基于 uView Pro 的 JSON 规则动态表单渲染器，兼容 form-create / form-create-uni 的规则约定。把一份 JSON 规则渲染成 uView Pro 原生样式的表单，支持填写、校验、提交、重置，全端可用（H5 / 小程序 / App）。

特性

• JSON 规则驱动，规则约定对齐 form-create / form-create-uni，PC 端设计器产物可直接复用
• 内置字段类型：input / password / textarea / inputNumber / radio / checkbox / select / cascader / switch / datePicker / timePicker / dateRange / timeRange / slider / rate / upload / color / transfer / tree / treeSelect / editor（富文本）/ signature（手写签名）
• 展示类字段：span / el-divider / el-alert / el-button / div
• 支持声明式（rule prop）与命令式（showForm）两种用法

前置依赖

本插件基于 uView Pro 组件渲染，使用前请先安装并全局配置 uView Pro（^0.5.16）。富文本（editor）、手写签名（signature）依赖 uni 原生 editor / canvas，各端能力存在差异，请以实测为准。

安装

在 uni-app 项目中通过 uni_modules 导入本插件后，easycom 会自动注册组件，无需手动 import。

基础用法（声明式）

<template>
  <form-create-uview-pro ref="formRef" :rule="rule" :option="option" @submit="onSubmit" />
</template>

<script setup lang="ts">
import { ref } from 'vue'

const formRef = ref()
const rule = ref([
  { type: 'input', field: 'name', title: '姓名', value: '', props: { placeholder: '请输入姓名' }, validate: [{ required: true, message: '请输入姓名' }] },
  { type: 'radio', field: 'sex', title: '性别', value: 1, options: [{ label: '男', value: 1 }, { label: '女', value: 2 }] },
])
const option = ref({ labelPosition: 'left' })

function onSubmit(finalRule) {
  // finalRule 为写回 value 后的规则数组
  console.log(finalRule)
}
</script>

命令式用法

// 动态设置规则并渲染
formRef.value.showForm(rule)
// 回填表单值（field → value）
formRef.value.setFormModel({ name: '张三', sex: 2 })
// 校验
formRef.value.validate((valid) => { /* ... */ })
// 取写回 value 后的规则数组 / 扁平数据对象
const finalRule = formRef.value.getFormData()
const model = formRef.value.getFormModel()
// 重置
formRef.value.resetFields()

Props

Events

暴露方法（defineExpose）

规则字段（JsonFormFieldRule）

完整类型契约见组件目录下 types.ts。顶层公共字段（各控件通用）：

支持的字段类型与重要属性

下表 props 列为该控件唯一被解析的属性键；未列出的属性不生效。

表单整体配置（option / JsonFormConfig）

不支持的组件（明确不渲染）

子表单组件、辅助组件、布局组件、栅格 row/col、表格 table、标签页 tabs、卡片 card、折叠面板 collapse、步骤条 steps、间距 space，以及任何未在上表列出的自定义 / 高级组件。遇到这些容器时，请在传入前递归扁平化、只保留其中的基础控件。

递归扁平化示例

form-create 的布局/容器组件（栅格、表格、标签页、卡片、折叠面板等）没有 field，表单控件都挂在其 children 里。本插件已内置 flattenControls 工具，把含布局容器的规则树一行拍平成「基础控件数组」，无需自己实现，直接 import 即可：

// 短路径（推荐）：从插件根入口引用
import { flattenControls } from '@/uni_modules/form-create-uviewPro'
// 或完整路径：
// import { flattenControls } from '@/uni_modules/form-create-uviewPro/components/form-create-uview-pro/utils'

// designerRule 为 PC 设计器导出的原始规则（可能含栅格/表格/标签页等布局容器）
const controls = flattenControls(designerRule)

// 再传给组件：声明式绑定 :rule，或命令式 showForm
formRef.value.showForm(controls)
// 也可直接绑定：<form-create-uview-pro :rule="controls" />

内部判据（flattenControls 的处理规则）：

1. hidden === true（设计器「隐藏」开关）的节点整体跳过（容器隐藏则内部控件同跳过）；
2. 带 field 的节点 = 基础控件叶子 → 直接收集、不再下钻（子表单等复合控件当作不透明整体，不误拆内部字段）；
3. 无 field 的节点 = 布局/容器 → 忽略自身、递归下钻 children。

控件保持原有出现顺序。函数签名：flattenControls(nodes: Record<string, any>[]): Record<string, any>[]。

兼容性

平台兼容矩阵以插件详情页 / package.json 为准。

许可

本插件基于 MIT License 开源，版权归 向小江，详见插件根目录 LICENSE。