更新记录

0.0.1（2025-03-26）

初始化发布，目前兼容H5、android-app、微信小程序

平台兼容性

uni-app

其他

ng-form-uniui

简介

ng-form基于uniui的实现版本，目前兼容微信小程序、H5、android-app。已实现组件包含:

输入框
文本输入框
日期
日期时间
日期范围
数字输入框
单选框
多选框
下拉选择框
级联选择器
滑动选择器
评分
开关选择器
文件上传
图片上传

区划选择
webview内嵌

卡片布局
栅格布局
页签布局
折叠面板

使用说明

目前仅支持在uniapp端填报和展示，不支持表单配置，表单配置在pc端通过ng-form-element或者ng-form-elementplus进行。

代码使用说明:

<template>
    <view class="content">  
        <ng-form-uniui   ref="formBuild"  :models="formData"   :formTemplate="formTemplate" />
        <button   @click="formSubmit">提交</button> 
    </view>
</template>

<script> 

    // 实际使用中表单模板通过接口从后端获取
    import formJson from './form.json' 
    export default { 
        data() {
            return {
                formCode: '' , 
                id: '' ,
                formData: {

                } , // 表单数据 从后台获取
                formTemplate: formJson // 模板数据，从后台获取

            }
        },
        onLoad() { 
        }, 
        methods: {

            formSubmit() {
                const this_ = this 
                // 效验
                this.$refs.formBuild.validate().then(valid=> {
                    console.log('valid' , valid)
                    if(valid) {
                        const fdata = this_.$refs.formBuild.getData()

                        console.log('数据' , fdata) 
                    }
                })       
            }
        }
    }
</script> 

效果展示

基础表单