微信小程序动态生成表单来啦!你再也不需要手写表单了!

dc-vant-form

由于我们在小程序上涉及到数据采集业务,需要经常使用表单,微信小程序的表单使用起来非常麻烦,数据和表单是分离的,每个输入框都需要做数据处理才能实现响应式数据,所以我开发了dc-vant-form,针对原生微信小程序+vant组件构建的自定义表单,开发者可以通过表单配置项来快速生成表单。

1、🚩解决微信小程序表单双向绑定问题

2、👍解决微信小程序下拉弹框值与表单绑定问题

3、✨配置项自动生成表单

4、🎉表单详情通过配置项控制详情回显

5、🚀操作表单单项数据修改

6、🔥提供9种输入组件覆盖表单的大部分业务场景

说明

1、在使用前需要保证项目中安装了vant

2、在使用表单之前,你需要准备表单渲染的数据,以及当前用作回显的详情数据。

3、该表单提供了9种输入组件,分别为:文本、小数、整数、级联选择器、文本域、数字间隔输入器、标准时间选择器、年月日时间选择器、年月时间选择器。

4、初始化时配置参数必传,表单可传可不传,若只传配置参数,我们会根据配置参数自动生成表单。

5、表单提供编辑回显、单条数据传入回显。

6、通过getInit函数初始化表单,通过submit函数获取表单结果。


开始

npm i dc-vant-form

自定义表单示例:

初始化

在初始化前,需要先定义初始化配置,配置项如下:

key 说明
label 表单label
module 表单绑定的数据key
type 表单组件类型,值对应:1文本、2小数、3整数、4级联选择器、5文本域、6时间选择器、7数字间隔输入器
isRequired 是否星号校验,值对应:true、false
options 表单下拉菜单项,值对应数组对象:[{label: '红色',value: 'red'}]
dateType 时间选择器类型,默认标准时间选择器,值对应:datetime标准时间、date年月日、year-month年月

注意点

类型 说明
type: 4 必须配置options项,你可以给它默认值空数组[]
type: 6 必须配置dateType项,你可以选择三种对应值:datetime、date、year-month
type: 7 必须配置 beginModule、endModule,分别对应左侧、右侧输入框;type为7不需要配置module项

下面是示例:

"usingComponents": {
    "dc-vant-form": "/miniprogram_npm/dc-vant-form/dc-vant-form/index"
  }

页面:

<dc-vant-form id="dc-vant-form" />

配置项:

config: [
      {
        label: '详细地址',
        module: 'address',
        type: 1, 
        isRequired: true
      },
      {
        label: '商品类型',
        module: 'goodsType',
        type: 4,
        isRequired: true,
        options: [
          {
            id: 1,
            label: '电子产品',
            value: 101
          },
          {
            id: 2,
            label: '儿童玩具',
            value: 102
          },
          {
            id: 3,
            label: '服装饰品',
            value: 103
          }
        ]
      },
      {
        label: '商品颜色',
        module: 'goodsColor',
        type: 4,
        isRequired: true,
        options: [
          {
            id: 1,
            label: '红色',
            value: 'red'
          },
          {
            id: 2,
            label: '青色',
            value: 'cyan'
          },
          {
            id: 3,
            label: '绿色',
            value: 'green'
          }
        ]
      },
      {
        label: '包装体积',
        module: 'packingVolume',
        type: 2,
        isRequired: false
      },
      {
        label: '商品重量',
        module: 'goodsWeight',
        type: 2,
        isRequired: true
      },
      {
        label: '商品结构',
        module: 'goodsStructure',
        type: 4,
        isRequired: true,
        options: [
          {
            id: 1,
            label: '成品',
            value: 2230
          },
          {
            id: 2,
            label: '组装',
            value: 2231
          }
        ]
      },
      {
        label: '商品数量',
        module: 'goodsNumber',
        type: 3,
        isRequired: false
      },
      {
        label: '可购范围',
        beginModule: 'beginLimit',
        endModule: 'endLimit',
        type: 7,
        isRequired: false
      },
      {
        label: '联系人',
        module: 'contact',
        type: 1,
        isRequired: false
      },
      {
        label: '创建时间',
        module: 'createDate',
        type: 6,
        dateType: 'date',
        isRequired: true
      },
      {
        label: '标准时间',
        module: 'createDate2',
        type: 6,
        dateType: 'datetime',
        isRequired: true
      },
      {
        label: '选区年月',
        module: 'createDate3',
        type: 6,
        dateType: 'year-month',
        isRequired: true
      },
      {
        label: '备注',
        module: 'remark',
        type: 5,
        isRequired: false
      }
    ]

我们将上面的配置项传入init函数初始化表单

  // 数据初始化
  init() {
    let dom = this.selectComponent("#dc-vant-form");
    dom.getInit(this.data.config)
  },
      
  onLoad(options) {
    this.init();
  },

image-20231118110736510


获取表单数据

我们通过submit函数获取表单数据

  // 提交
  sure() {
    let dom = this.selectComponent("#dc-vant-form");
    console.log(dom.submit());
  }

image-20231118112342663

image-20231118112407795


表单回显

在初始化时,可以传入表单详情,我们会根据配置项回显表单数据。

// 表单详情数据
form: {
  address: '浙江省杭州市',
  goodsType: 101,
  goodsColor: 'red',
  packingVolume: 10,
  goodsWeight: 5,
  goodsStructure: 2230,
  goodsNumber: 100,
  beginLimit: 1,
  endLimit: 10,
  contact: 'DCodes',
  createDate: '2023-01-01',
  createDate2: '2023-01-01 20:00:00',
  createDate3: '2023-01',
  remark: '这是一个动态的文本域'
}
init() {
  let { config,form } = this.data;
  let dom = this.selectComponent("#dc-vant-form");
  dom.getInit(config, form)
},

onLoad(options) {
  this.init();
},

image-20231118112138758


单项数据修改

我们提供onAccept函数,用于接收指定表单项的修改

onAccept接收三个参数,依次为:value、key、place

参数 说明
value 更改的值
key 表单中对应的key
place 如果是数字间隔修改器,需要传入place,分为两个固定参数:left、right,表示需要修改间隔输入框的左侧和右侧

bandicam 2023-11-16 16-14-16-944 00_00_00-00_00_30~1

// 修改某项
update() {
    let dom = this.selectComponent("#dc-vant-form");
    // 普通类型
    // dom.onAccept('浙江省杭州市', 'address')
    
    // 级联选择器-value为options中的key
    // dom.onAccept(103, 'goodsType')
    
    // 数字间隔输入器
    // dom.onAccept(1, 'beginLimit', 'left')
    // dom.onAccept(3, 'endLimit', 'right')
 }

如果觉得该组件不错,欢迎点赞👍、收藏💖、转发✨哦~

阅读其它:

微信小程序用户隐私API(👈点击直达)

前端换肤,聊一聊主题切换那些事(👈点击直达)

Shapes布局-文字环绕动画(👈点击直达)

css绘制一个Pinia小菠萝(👈点击直达)

深入理解Promise(👈点击直达)

posted @ 2023-11-18 15:19  兔子先森Ace  阅读(1361)  评论(3编辑  收藏  举报