更新记录
0.0.1(2025-03-26)
初始化发布,目前兼容H5、android-app、微信小程序
平台兼容性
Vue2 | Vue3 |
---|---|
√ | × |
App | 快应用 | 微信小程序 | 支付宝小程序 | 百度小程序 | 字节小程序 | QQ小程序 |
---|---|---|---|---|---|---|
HBuilderX 4.11 app-vue | × | √ | × | × | × | × |
钉钉小程序 | 快手小程序 | 飞书小程序 | 京东小程序 | 鸿蒙元服务 |
---|---|---|---|---|
× | × | × | × | × |
H5-Safari | Android Browser | 微信浏览器(Android) | QQ浏览器(Android) | Chrome | IE | Edge | Firefox | PC-Safari |
---|---|---|---|---|---|---|---|---|
× | √ | √ | √ | √ | × | √ | √ | × |
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>
效果展示
基础表单