安装
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时支持 | 无 |
当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>预览
-
垂直排列label
页面路径: pages/vertical/index
设置layout: vertical
-
只读模式
页面路径: pages/readonly/index
- 二级城市选择
页面路径: pages/cityselect/index
- 自定义插槽内容
页面路径: pages/content/index
Badges
