1.0.2 • Published 4 years ago
@mas.io/mas-infocheck v1.0.2
安装
tnpm install --save @alipay/mas-infocheck组件介绍
行业小程序信息核对组件，针对支付宝行业的各个不同场景的表单验证提供支持。
参数说明
| 属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 |
|---|---|---|---|---|---|
| editable | 否 | boolean | 是否处于编辑模式 | 是 | |
| title | 是 | string | 标题 | 空 | 收货地址 |
| layout | 否 | string | 表单布局方向 inline ，vertical | inline | |
| titleClass | 否 | string | title 的class | ||
| fields | 是 | array | 表单类型的每一项 | [] | |
| value | 是 | object | 表单各项的值 | - | |
| defaultValue | 否 | object | 表单各项的初始值 | - | |
| onChange | 是 | function | 当表单值变化时回调函数 | 空函数 | |
| onSendVeifyCode | 否 | function | 点击发送验证码时的回调函数 | 空函数 | |
| onItemConfirm | 否 | function | confirm触发回调函数, item为input，textarea时有效 | 空函数 | |
| onItemFocus | 否 | function | focus触发回调函数， item为input，textarea时有效 | 空函数 | |
| onItemBlur | 否 | function | focus触发回调函数， item为input，textarea时有效 | 空函数 | |
| labelWidth | 否 | string | label宽度 | 160rpx | 200rpx |
| onLoadPickerData | mode 为 dynamicMultiLevelPicker 时必填 | function | dynamicMultiLevelPicker 选择的值 | onLoadPickerData(key, param) { return { name: '北京', code: '100010' };} |
onLoadPickerData 中的key为当前选项的key, param为选中的对象值， 需要 return { name: '', code: ''}类型的数据;
res 示例
属性 必填 参数说明 name 是 选项名称 code 是 选项code defaultValue只针对第一次渲染时有效，如果在组件渲染之后defaultValue的值有变的话组件展示不会随之变化。使用value和onChange可以使组件展示实时响应value的变化。
其中fields是数组，fields里面的每一项的格式如下:
| 属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 | |
|---|---|---|---|---|---|---|
| mode | 是 | string | 类型：regionPicker（地址选择）, datePicker(日期选择), verifyCode(验证码), textarea（文本框）, input(输入框), optionsSelect(选项选择器), multiLevelSelect(多级联选择器), customPiker(自定义级联选择) | 无 | ||
| label | 是 | string | 表单项标题 | 无 | 收货人 | |
| key | 是 | string | 标注表单项的key | 无 | name | |
| require | 否 | boolean | 是否展示红点 | 无 | ||
| allowClear | 否 | boolean | 是否可以清空, 在mode为textarea（文本框），input(输入框) 有效，无mode时该属性无效 | 无 | ||
| placeholder | 否 | string | mode是verifyCode，textarea，input时支持 | 无 | ||
| placeholderClass | 否 | string | mode是verifyCode，textarea，input时支持 | 无 | ||
| disabled | 否 | boolean | mode是textarea，input时支持 | 无 | ||
| maxlength | 否 | number | mode是verifyCode，textarea，input时支持 | 无 | ||
| focus | 否 | boolean | mode是verifyCode，textarea，input时支持 | 无 | ||
| type | 否 | string | mode是verifyCode，input时支持 | 无 | ||
| autoHeight | 否 | boolean | mode是textarea时支持 | 无 | ||
| showCount | 否 | boolean | mode是textarea时支持 | 无 | ||
| password | 否 | boolean | mode是input时支持 | 无 | ||
| confirmType | 否 | string | mode是input时支持 | 无 | ||
| confirmHold | 否 | boolean | mode是input时支持 | 无 | ||
| timeout | 否 | number | mode是verifyCode支持，倒计时时间 | 60 | 60 | |
| showAutoLocate | 否 | boolean | mode是regionPicker支持，是否显示自定义 | false | ||
| title | 否 | string | mode是optionsSelect,multiLevelSelect,customPiker 时支持 选择项名称 | 无 | ||
| optionsOne | 是 | array | mode是optionsSelect时支持 选择项第一项列表 (注：只传optionsOne可作为单级下拉框) | [] | ||
| optionsTwo | 否 | array | mode是optionsSelect时支持 选择项第二项列表 | [] | ||
| positiveString | 否 | string | mode是optionsSelect时支持 确认按钮文案 | 确定 | ||
| negativeString | 否 | string | mode是optionsSelect时支持 取消按钮文案 | 取消 | ||
| multiLevelSelectItems | 是 | array | mode是multiLevelSelect时支持 | 无 | [{name: "杭州市",subList: [{name: "西湖区",subList: {name: "古翠街道"},{name: "文新街道"}}]}]}] |
当showAutoLocate为true时，确保小程序挂载了my.reGeoCode JSAPI 的权限
slot
| name | 说明 |
|---|---|
| content-prefix | title和表单之间可以插入的内容 |
| content-postfix | 表单后面可以插入的自定义内容 |
| item-prefix-{{key}}} | 特定的一行表单项前面可以插入的自定义内容 |
| item-postfix-{{key}} | 特定的一行表单项后面可以插入的自定义内容 |
| field-prefix-{{key}}} | 特定的一行表单项上面可以插入的自定义内容 |
| field-postfix-{{key}} | 特定的一行表单项下面可以插入的自定义内容 |
在小程序中使用
{
"usingComponents": {
"mas-infocheck": "@alipay/mas-infocheck/es/index"
}
}在 page.axml 中引用组件
<!-- 页面使用方式 -->
<mas-infocheck
title="信息核对"
fields="{{fields}}"
onChange="onChange"
value="{{value}}"
>
</mas-infocheck>预览
Badges
