支付宝小程序浮层组件 气泡·Popover

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

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

扫码体验

示例代码

{
  "defaultTitle": "Popover",
  "usingComponents": {
    "popover": "mini-ali-ui/es/popover/index",
    "popover-item": "mini-ali-ui/es/popover/popover-item/index"
  }
}

<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" iconType="{{showIcon ? 'qr' : ''}}" data-direction="{{position}}">
        <text>{{position}}</text>
      </popover-item>
      <popover-item onItemClick="itemTap2" iconType="{{showIcon ? 'qr' : ''}}" data-index="{{2}}">
        <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>
  <button class="demo-popover-test-btn" onTap="onIconChangeTap">显示/隐藏图标</button>
</view>

const position = ['top', 'topRight', 'rightTop', 'right', 'rightBottom', 'bottomRight', 'bottom', 'bottomLeft', 'leftBottom', 'left', 'leftTop', 'topLeft'];
Page({
  data: {
    position: position[0],
    show: false,
    showMask: true,
    showIcon: 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,
    });
  },
  onIconChangeTap() {
    this.setData({
      showIcon: !this.data.showIcon,
    });
  },
  onMaskClick() {
    this.setData({
      show: false,
    });
  },
  itemTap1(e) {
    my.alert({
      content: `点击_${e.currentTarget.dataset.direction}`,
    });
  },
  itemTap2(e) {
    my.alert({
      content: `点击_${e.currentTarget.dataset.index}`,
    });
  },
});

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

属性

popover-item