更新记录

1.0.3(2024-01-22)

增加了日期组件,增加了插槽功能

1.0.2(2024-01-20)

优化了表单功能,更新使用说明

1.0.1(2024-01-19)

表单增加了图片上传功能

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
HBuilderX 3.6.0 × × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × × × × × ×
  • 使用说明 components下g-form拷贝到使用项目的components内
  • 需要安装uni扩展组件 uni-data-select https://uniapp.dcloud.net.cn/component/uniui/uni-data-select.html

参数 注释
submitConfig 提交按钮配置{text:'',textColor:'',bGround:''}
disabled 是否禁用
formItem 表单内容(配置如下)
@submit form表单内容
formItem 支持类型 说明
type {input、switch、radio、checkbox、slider、textarea、select、imgUpload,date,slot} 组件类型
title String 标签文本
key String 字段绑定key值
list [] 单选,多选,下拉选数据源
num Number (必传)上传图片数量
text String 上传图片文案
placeholder String input,textarea组件提示信息,不填默认取title
slotName String type为slot使用,插槽name
、<template>
    <view class="content">
        <gForm :formItem="formItem" :disabled="false" :submitConfig="submitConfig" submitText="提交" @submit="submit">
            <template slot="slot"></template> 
        </gForm>
    </view>
</template>

<script>
    import gForm from '@/components/g-form/index.vue';
    export default {
        components:{gForm},
        data() {
            return {
                submitConfig:{
                    // text:'111',
                    // textColor:'red',
                    // bGround:'#000',
                },
                formItem:[
                    {type:'slot',slotName:'slot',title:'插槽',key:'slot'},
                    {type:'input',title:'名字',key:'name',placeholder:'测试input'},
                    {type:'date',title:'日期',key:'date1',placeholder:'时间'},
                    {type:'switch',title:'开关',key:'switch'},
                    {type:'radio',title:'单选',key:'radio',list:[{value:1,name:'1'},{value:2,name:'2'}]},
                    {type:'checkbox',title:'多选框',key:'checkbox',list:[{value:1,name:'1'},{value:2,name:'2'}]},
                    {type:'slider',title:'进度',key:'slider'},
                    {type:'textarea',title:'多行文本',key:'textarea',placeholder:'测试文本'},
                    {type:'select',title:'多选框',key:'select',list:[{value:1,text:'1'},{value:2,text:'2'}]},
                    {type:'imgUpload',title:'照片',key:'imgList',num:2,text:'上传'},
                ]
            }
        },
        onLoad() {

        },
        methods: {
            submit(a){
                console.log(a)
            }
        }
    }
</script>

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问