安装

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>

预览

1. 垂直排列label

   demo预览

   页面路径: pages/vertical/index

   设置layout: vertical

2. 只读模式

demo预览

页面路径: pages/readonly/index

3. 二级城市选择

demo预览

页面路径: pages/cityselect/index

4. 自定义插槽内容

demo预览

页面路径: pages/content/index

Badges

[![install size][install-size-image]][install-size-url]