Skip to content

基于 vant 的微信小程序动态表单组件实现,支持以声明式配置动态创建表单

License

Notifications You must be signed in to change notification settings

tanghongxin/vant-weapp-dynamic-form

Repository files navigation

vant-weapp-dynamic-form

基于 vant 的微信小程序动态表单组件实现,支持以声明式配置动态创建表单

效果示例

安装

  1. 安装相关依赖 npm i -S @vant/weapp miniprogram-computed
  2. 微信开发者工具/工具/构建 npm
  3. 拷贝 components 目录至你的项目下

使用

参见 pages/index

配置方式

输入框(field)

{
  "component": "field",
  "key": "",
  "label": "",
  "readonly": false,
  "required": false,
  "maxLength": 20,
  // "type": "input",
  // "type": "number",
  // "type": "digit",
  "type": "textarea",
  "autosize": { "maxHeight": 100, "minHeight": 100 }
}

选择器(picker)

{
  "component": "picker",
  "key": "",
  "label": "",
  "readonly": false,
  "required": false,
  // "columns": ["A", "B"],
  "columns": [
    { "text": "A", "value": "0" },
    { "text": "B", "value": "1" }
  ]
}

单选框(radio)

{
  "component": "radio",
  "key": "",
  "label": "",
  "readonly": false,
  "required": false,
  // "columns": ["A", "B"],
  "columns": [
    { "text": "A", "value": "0" },
    { "text": "B", "value": "1" }
  ],
  // "direction": "horizontal",
  "direction": "vertical"
}

图像、视频上传(uploader)

{
  "component": "uploader",
  "key": "",
  "label": "",
  "readonly": false,
  "required": false,
  "mediaType": ["image", "video"],
  "capture": ["album", "camera"],
  "maxCount": 6,
  "maxDuration": 60
}

时间选择(datetime-picker)

{
  "component": "datetime-picker",
  "key": "",
  "label": "",
  "readonly": false,
  "required": false,
  "maxDate": 1702383027000,
  "minDate": 0,
}

年份区间选择(year-range-picker)

{
  "component": "year-range-picker",
  "key": "",
  "label": "",
  "readonly": false,
  "required": false,
  "maxYear": 2033,
  "minYear": 2010
}

About

基于 vant 的微信小程序动态表单组件实现,支持以声明式配置动态创建表单

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published