Popover 气泡

气泡。

扫码体验：
Popover 气泡 - 图1

popover

属性名描述类型默认值必选
className最外层覆盖样式Stringfalse
show气泡是否展示Booleanfalsetrue
showMask蒙层是否展示Booleantruefalse
position气泡位置可选值：top、topRight、topLeft、bottom、bottomLeft、bottomRight、right、rightTop、rightBottom、left、leftBottom、 leftTopStringbottomRightfalse

popover-item

属性名描述类型默认值必选
className单项样式Stringfalse
onItemClick单项点击事件() => voidfalse

示例

  1. {  
  2.   "usingComponents": {
  3.     "popover": "mini-antui/es/popover/index",
  4.     "popover-item": "mini-antui/es/popover/popover-item/index"
  5.   }
  6. }
  1. <popover
  2.   position="{{position}}"
  3.   show="{{show}}"
  4.   showMask="{{showMask}}"
  5.   onMaskClick="onMaskClick"
  6. >
  7.   <view onTap="onShowPopoverTap">点击显示</view>
  8.   <view slot="items">
  9.     <popover-item onItemClick="itemTap1">
  10.       <text>line1</text>
  11.     </popover-item>
  12.     <popover-item>
  13.       <text>line2</text>
  14.     </popover-item>
  15.   </view>
  16. </popover>
  1. Page({
  2.   data: {
  3.     position: 'bottomRight',
  4.     show: false,
  5.     showMask: true,
  6.   },
  7.   onMaskClick() {
  8.     this.setData({
  9.       show: false,
  10.     });
  11.   },
  12.   onShowPopoverTap() {
  13.     this.setData({
  14.       show: true,
  15.     });
  16.   },
  17.   itemTap1() {
  18.     my.alert({
  19.       content: '点击1',
  20.     });
  21.   },
  22. });

原文: https://docs.alipay.com/mini/component-ext/popover