1.0.6 • Published 6 years ago
miniprogram-wo-form v1.0.6
miniprogram-wo-form
小程序自定义组件-表单
使用
- 安装依赖:
npm install miniprogram-wo-form -D
npm install miniprogram-wo-loading -D
- 执行小程序开发工具: 工具-npm 构建 会在当前目录下出现miniprogram_npm目录
- 引用
{
"usingComponents": {
"wo-form": "/miniprogram_npm/miniprogram-wo-form/index"
}
}
- 属性
- 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
}