0.0.4 • Published 4 years ago
@mas.io/mas-bank-card v0.0.4
安装
tnpm install --save @alipay/mas-bank-card组件介绍
行业小程序银行卡组件，此组件有未绑卡和已绑卡两种状态。
参数说明
未绑卡状态传值
| 属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 |
|---|---|---|---|---|---|
| binded | 否 | Boolean | 绑卡状态 | false(未绑卡) | -- |
| unbindedBackgroundUrl | 否 | String | 未绑卡背景底图 | 默认有图 | -- |
| title | 否 | String | 未绑卡状态提示title(binded为false生效) | 绑定本人银行卡 | -- |
| desc | 否 | String | 未绑卡状态提示详细描述(binded为false生效) | 绑定后可提取公积金到此卡 | -- |
| onClick | 是 | Function | 点击绑卡回调 | '' | -- |
| value | 否 | any | 如果业务需要可传,在回调onClick(bindedValue)接收 | '' | -- |
| className | 否 | String | class类名 | - | -- |
已绑卡状态传值
| 属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 |
|---|---|---|---|---|---|
| binded | 是(要传true) | Boolean | 绑卡状态 | false(未绑卡) | -- |
| bindedBackgroundUrl | 是 | String | 背景底图 | - | -- |
| bankIconUrl | 否 | String | 银行图标 | - | -- |
| bankName | 是 | String | 银行名称 | '' | -- |
| bankCardType | 否 | String | 银行卡类型 | - | -- |
| bankCardNumber | 是 | String | 银行卡号(接受带格式的字符串) | '' | '** ** **** 8989' |
| operationText | 否 | String | 右边操作文案(为空则不显示右边操作) | '' | -- |
| onClick | 否 | Function | 点击替换或其他操作,存在operationText生效 | '' | -- |
| value | 否 | any | 如果业务需要可传,在回调onClick(bindedValue)接收 | '' | -- |
| className | 否 | String | class类名 | - | -- |
在小程序中使用
{
"usingComponents": {
"mas-bank-card": "@alipay/mas-bank-card/es/index"
}
}在 page.axml 中引用组件
未绑卡:
<!-- 页面使用方式 -->
<mas-bank-card
title="{{title}}"
desc="{{desc}}"
onClick="onClick"
value="{{value}}"
className="{{className}}"
/>已绑卡:
<!-- 页面使用方式 -->
<mas-bank-card
binded="{{true}}"
bindedBackgroundUrl="{{bindedBackgroundUrl}}"
bankIconUrl="{{bankIconUrl}}"
bankName="{{bankName}}"
bankCardType="{{bankCardType}}"
bankCardNumber="{{bankCardNumber}}"
operationText="{{operationText}}"
onClick="onClick"
value="{{value}}"
className="{{className}}"
/>Badges
