全部产品

气泡(popover)

本文介绍气泡(popover)。

popover

属性名 类型 默认值 描述 必选
className String - 最外层覆盖样式。 false
show Boolean false 气泡是否展示。 true
showMask Boolean true 蒙层是否展示。 false
position String bottomRight 气泡位置可选值:toptopRighttopLeftbottombottomLeftbottomRightrightrightToprightBottomleftleftBottomleftTop false

popover-item

属性名 类型 默认值 描述 必选
className String - 单项样式。 false
onItemClick () => void - 单项点击事件。 false

代码示例

  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. });