0.0.3 • Published 5 years ago
@mas.io/mas-popup-select v0.0.3
安装
tnpm install --save @alipay/mas-popup-select组件介绍
行业小程序弹出菜单组件，基于mini-ali-ui/Popup 组件封装。
参数说明
| 属性 | 必填 | 参数类型 | 参数说明 | 默认值 | 示例 |
|---|---|---|---|---|---|
| data | 是 | Array | 数据列表(过长选项部分会产生滚动) | [] | -- |
| show | 否 | Boolean | 是否显示弹框 | false | -- |
| titleTip | 否 | String | 弹框首行提示文字 | 请选择 | -- |
| mask | 否 | Boolean | 是否显示蒙层 | true | -- |
| className | 否 | String | class类名(会加到组件最外层) | - | -- |
| onItemClick | 是 | Function | 点击选项回调,可接收两个参数(item, index),需设置show为false关闭弹框 | - | -- |
| onCancle | 是 | Function | 点击取消回调(需设置show为false关闭弹框) | - | -- |
| onMaskClick | 否 | Function | 点击蒙层回调,mask为true生效(需设置show为false关闭弹框) | - | -- |
data
const data = [
{
text: '必填，选项展示文案',
'其他属性': '选填，根据业务需求'，
}
]
// 在回调onClick(item,idnex), item为data数组中的每个对象,index为数组索引在小程序中使用
{
"usingComponents": {
"mas-popup-select": "@alipay/mas-popup-select/es/index"
}
}在 page.axml 中引用组件
<!-- 页面使用方式 -->
<mas-popup-select
data="{{data}}"
show="{{false}}"
titleTip="请选择"
mask="{{true}}"
className="{{className}}"
onItemClick="onItemClick"
onCancle="onCancle"
onMaskClick="onMaskClick"
/>Badges
