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