0.0.3 • Published 4 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"
/>