miniprogram-wo-form

小程序自定义组件-表单

使用

1. 安装依赖：

npm install miniprogram-wo-form -D
npm install miniprogram-wo-loading -D

2. 执行小程序开发工具： 工具-npm 构建 会在当前目录下出现miniprogram_npm目录
3. 引用

{
  "usingComponents": {
    "wo-form": "/miniprogram_npm/miniprogram-wo-form/index"
  }
}

4. 属性

• formEls

 /**
     * 表单元素列表【各属性值后续增加】， 默认值为示例中的值
     * 除了elType 其余属性设置同官网原生组件设置
     * formEls[{
     *  elType: 'input',  // 值 input checkbox button  captchaMsg captchaImg:暂时没有
     *  type: 'text', // text  number  idcard digit
     *  placeholder: '', 
     *  required: true, //是否必填 
     *  password: false,  // 是否是密码类型
     *  emptyMsg: '', // 必填项为空时报错信息，未配置时同 placeholder
     *  describe:'', // 最右边的描述
     *  label: '',
     *  value: '',
     *  disabled: false,
     *  verifyType: '', // 默认是表单name
     *  maxlength: 140, // 最大输入长度，设置为 -1 的时候不限制最大长度
     *  name: '',
     *  bindinput: () => {}
     * },
     * {
     *  elType: 'captchaMsg',
     *  required: true, //是否必填 是否是密码类型
     *  phone: '', //手机号
     *  emptyMsg: '', // 必填项为空时报错信息，未配置时同 placeholder
     *  verifyType: '', // 默认是表单name
     *  voiceAPI: { // 语音api
     *    url: '',
     *    data: {}
     *  },
     *  msgAPI: { // 短信api
     *    url: '',
     *    data: {}
     *   },
     *  name: '',
     *  label: ''
     * },
     * {
     *  elType: 'button',
     *  formType: 'submit',
     *  submit: (data) => {}, // 提交函数
     *  success: (res) => {},
     *  fail: (res) => {},
     *  complete: () => {} // > ps:暂未实现
     *  sumitFun: () => {} // 提交
     *  value: ''
     *  
     * }]
     * 
     */

• formTpl

 { // 目前只有两种模板 template1登录类似   template2预约确认类似
      type: String,
      value: 'template1'
},

• formStatus

 { // 表单状态 false 按钮样式 btn-disable
    type: Boolean,
    value: true
}

• apis

 /**
    * 表单提交请求
    * 数据格式{
    * url：'',
    * data:{}
    * }
    */

• isCaptchaImg

{ // 为了减少循环次数，由使用者配置短信表单formEls配置下标， 未配置则证明该表单没有短信
    type: Number,
    value: -1
}

• isCaptchaMsg

{ // 为了减少循环次数，由使用者配置图片验证码formEls配置下标， 未配置则证明该表单没有短信
    type: Number,
    value: -1
}