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();
  },

---

獲取表單數據

我們通過submit函數獲取表單數據

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

---

表單回顯

在初始化時，可以傳入表單詳情，我們會根據配置項回顯表單數據。

// 表單詳情數據
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();
},

---

單項數據修改

我們提供onAccept函數，用于接收指定表單項的修改

onAccept接收三個參數，依次為：value、key、place

參數	說明
value	更改的值
key	表單中對應的key
place	如果是數字間隔修改器，需要傳入place，分為兩個固定參數：left、right，表示需要修改間隔輸入框的左側和右側

// 修改某項
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(??點擊直達)

總結

以上是生活随笔為你收集整理的微信小程序动态生成表单来啦！你再也不需要手写表单了！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。