UNPKG

antd-mini

Version:

antd-mini 是支付宝小程序 UI 组件库,遵循 Ant Design 规范。

147 lines (124 loc) 11.8 kB
--- nav: path: /components group: title: 导航 order: 6 toc: 'content' --- # PopoverList 气泡菜单 点击元素,弹出气泡式的菜单。用于导航功能的气泡菜单唤起,通常用于收纳低频使用的功能。该功能只能通过导航栏上的图标激活。 ## 引入 在 `index.json` 中引入组件 ```json "usingComponents": { #if ALIPAY "ant-popover-list": "antd-mini/es/PopoverList/index" #endif #if WECHAT "ant-popover-list": "antd-mini/PopoverList/index" #endif } ``` ## 代码示例 ### 基本使用 ```xml <ant-popover-list visible="{{visible}}" list="{{list}}" placement="bottom-right" #if ALIPAY onTapItem="handleTapItem" onVisibleChange="handleVisibleChange" #endif #if WECHAT bindtapitem="handleTapItem" bindvisiblechange="handleVisibleChange" #endif > <ant-button inline>点我</ant-button> </ant-popover-list> ``` ```js Page({ data: { visible: true, list: [ { text: '扫一扫', icon: 'ScanningOutline', showBadge: true, id: 'scan', }, { text: '付钱/收钱', icon: 'ReceivePaymentOutline', showBadge: false, id: 'pay', }, { text: '乘车码', icon: 'TransportQRcodeOutline', showBadge: false, id: 'code', }, { text: '图片', iconImage: 'https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*XMCgSYx3f50AAAAAAAAAAABkARQnAQ', showBadge: false, id: 'image', }, ], }, handleVisibleChange(visible, e) { console.log(visible, e); #if ALIPAY this.setData({ visible }); #endif #if WECHAT this.setData({ visible: visible.detail }); #endif }, handleTapItem(e, item) { console.log(e, item); this.setData({ visible: false }); #if ALIPAY my.showToast({ content: '点击列表', duration: 1000 }); #endif #if WECHAT wx.showToast({ title: '点击列表' }); #endif }, }); ``` ### 气泡位置自适应 > `autoAdjustOverflow` 属性,可以让气泡被遮挡时自动调整位置 ```xml <ant-popover-list visible="{{true}}" list="{{list}}" autoAdjustOverflow="{{true}}" > <ant-button inline style="margin-top: 500px;">气泡位置自适应</ant-button> </ant-popover-list> ``` ### Demo 代码 <code src='../../demo/pages/PopoverList/index'></code> ## API | 属性 | 说明 | 类型 | 默认值 | | ----------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ---------------------------------------------------------------------------------------------------------------------------- | ------ | | autoAdjustOverflow | 气泡被遮挡时的自动调整位置 | boolean | true | | className | 类名 | string | - | | color | 背景颜色 | string | - | | contentClassName | content 类名 | string | - | | contentStyle | content 样式 | string | - | | content | 内容 | string \| slot | - | | defaultVisible | 默认是否显示 | boolean | false | | destroyOnClose | 不可见时是否卸载内容 | boolean | false | | maskClassName | 蒙层的类名 | string | - | | maskStyle | 蒙层的样式 | string | - | | placement | 气泡框位置,可选 `top`、`top-right`、`top-left`、`bottom`、`bottom-left`、`bottom-right`、`left`、`left-top`、`left-bottom`、`right`、`right-top` 或 `right-bottom` | string | top | | showMask | 是否展示蒙层,为 true 时点击空白处可关闭 Popover | boolean | true | | style | 样式 | string | - | | visible | 是否显示 | boolean | - | | #if ALIPAY onVisibleChange | visible 变更时的回调 | (visible: boolean, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | | #if ALIPAY onTapItem | visible 变更时的回调 | (item: [PopoverListItem](#popoverlistitem), event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | | #if WECHAT bindvisiblechange | visible 变更时的回调 | (visible: boolean, event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | | #if WECHAT bindtapitem | visible 变更时的回调 | (item: [PopoverListItem](#popoverlistitem), event: [Event](https://opendocs.alipay.com/mini/framework/event-object)) => void | - | ### PopoverListItem | 属性 | 说明 | 类型 | 默认值 | | --------- | ------------------------------------------------------- | ------- | ------ | | icon | 菜单的 icon | string | - | | iconImage | 菜单的 icon 的图片, 优先取 iconImage 没有再取 icon 字段 | string | - | | text | 类名 | string | - | | showBadge | 是否禁用 | boolean | false | | id | 右侧额外内容 | string | - | ### 主题定制 #### 样式变量 组件提供了下列 CSS 变量,可用于自定义样式,使用方法请参考 ConfigProvider 组件。 | 变量名 | 默认值 | 深色模式默认值 | 备注 | | ---------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------- | ------------------------ | | --popover-list-content-bg | <div style="width: 150px; height: 30px; background-color: rgba(0, 0, 0, 0.93); color: #ffffff;">rgba(0, 0, 0, 0.93)</div> | <div style="width: 150px; height: 30px; background-color: rgba(0, 0, 0, 0.93); color: #ffffff;">rgba(0, 0, 0, 0.93)</div> | Popover 列表内容背景颜色 | | --popover-list-content-color | <div style="width: 150px; height: 30px; background-color: #ffffff; color: #333333;">#ffffff</div> | <div style="width: 150px; height: 30px; background-color: #c5cad1; color: #ffffff;">#c5cad1</div> | Popover 列表内容颜色 | | --popover-list-badge-color | <div style="width: 150px; height: 30px; background-color: #ff411c; color: #ffffff;">#ff411c</div> | <div style="width: 150px; height: 30px; background-color: #ff411c; color: #ffffff;">#ff411c</div> | Popover 列表徽章颜色 | | --popover-list-item-bg | <div style="width: 150px; height: 30px; background-color: #e5e5e5; color: #333333;">#e5e5e5</div> | <div style="width: 150px; height: 30px; background-color: #444444; color: #ffffff;">#444444</div> | Popover 列表内容文字颜色 |