全部产品

Popover 气泡

气泡。可通过设置 Popover-item 宽高改变气泡大小,不支持文字自适应宽高。

说明:设置 popover 位于特定元素的正下方,可以把该元素放在 popover 内并且设置 position 为 bottom 。

扫码体验

image.png

示例代码

// API-DEMO page/component/popover.json
{  
  "defaultTitle": "Popover",
  "usingComponents": {
    "popover": "mini-antui/es/popover/index",
    "popover-item": "mini-antui/es/popover/popover-item/index"
  }
}

<!-- API-DEMO page/component/popover/.axml-->
<view class="demo-popover">
  <popover
    position="{{position}}"
    show="{{show}}"
    showMask="{{showMask}}"
    onMaskClick="onMaskClick"
  >
    <view class="demo-popover-btn" onTap="onShowPopoverTap">点击{{show ? '隐藏' : '显示'}}</view>
    <view slot="items">
      <popover-item onItemClick="itemTap1">
        <text>{{position}}</text>
      </popover-item>
      <popover-item onItemClick="itemTap2">
        <text>line2</text>
      </popover-item>
    </view>
  </popover>
</view>
<view class="demo-popover-test-btns">
  <button class="demo-popover-test-btn" onTap="onNextPositionTap">下个位置</button>
  <button class="demo-popover-test-btn" onTap="onMaskChangeTap">蒙层{{showMask ? '隐藏' : '显示'}}</button>
</view>

// API-DEMO page/component/popover.js
const position = ['top', 'topRight', 'rightTop', 'right', 'rightBottom', 'bottomRight', 'bottom', 'bottomLeft', 'leftBottom', 'left', 'leftTop', 'topLeft'];
Page({
  data: {
    position: position[0],
    show: false,
    showMask: true,
  },
  onShowPopoverTap() {
    this.setData({
      show: !this.data.show,
    });
  },
  onNextPositionTap() {
    let index = position.indexOf(this.data.position);
    index = index >= position.length - 1 ? 0 : index + 1;
    this.setData({
      show: true,
      position: position[index],
    });
  },
  onMaskChangeTap() {
    this.setData({
      showMask: !this.data.showMask,
    });
  },
  onMaskClick() {
    this.setData({
      show: false,
    });
  },
  itemTap1() {
    my.alert({
      content: '点击1',
    });
  },
  itemTap2() {
    my.alert({
      content: '点击2',
    });
  },
});

/* API-DEMO page/component/popover.css */
.demo-popover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 400px;
}
.demo-popover-btn {
  width: 100px;
  height: 100px;
  line-height: 100px;
  text-align: center;
  background-color: #fff;
  border: 1px solid #dddddd;
  border-radius: 2px;
}
.demo-popover-test-btns {
  display: flex;
  justify-content: space-around;
}
.demo-popover-test-btn {
  width: 45%;
}

属性

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

popover-item

属性名描述类型
className单项样式。String
onItemClick单项点击事件。() => void