支付寶小程序浮層組件 氣泡·Popover

氣泡?？赏ㄟ^設(shè)置 Popover-item 寬高改變氣泡大小，不支持文字自適應(yīng)寬高。

說明：設(shè)置 popover 位于特定元素的正下方，可以把該元素放在 popover 內(nèi)并且設(shè)置 position 為 bottom 。

掃碼體驗(yàn)

示例代碼

{


  "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">點(diǎn)擊{{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">下個(gè)位置</button>


  <button class="demo-popover-test-btn" onTap="onMaskChangeTap">蒙層{{showMask ? '隱藏' : '顯示'}}</button>


  <button class="demo-popover-test-btn" onTap="onIconChangeTap">顯示/隱藏圖標(biāo)</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: `點(diǎn)擊_${e.currentTarget.dataset.direction}`,


    });


  },


  itemTap2(e) {


    my.alert({


      content: `點(diǎn)擊_${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