支付宝小程序浮层组件 气泡·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