全部产品

气泡(Popover)

更新时间:2020-03-26 14:30:55

本文介绍气泡(Popover)。

popover

属性名 描述 类型 默认值 必选
className 最外层覆盖样式 String - false
show 气泡是否展示 Boolean false true
showMask 蒙层是否展示 Boolean true false
position 气泡位置可选值:toptopRighttopLeftbottombottomLeftbottomRightrightrightToprightBottomleftleftBottomleftTop String bottomRight false

popover-item

属性名 描述 类型 默认值 必选
className 单项样式 String - false
onItemClick 单项点击事件 () => void - false

代码示例

  1. {
  2. "usingComponents": {
  3. "popover": "mini-antui/es/popover/index",
  4. "popover-item": "mini-antui/es/popover/popover-item/index"
  5. }
  6. }
  1. <popover
  2. position="{{position}}"
  3. show="{{show}}"
  4. showMask="{{showMask}}"
  5. onMaskClick="onMaskClick"
  6. >
  7. <view onTap="onShowPopoverTap">点击显示</view>
  8. <view slot="items">
  9. <popover-item onItemClick="itemTap1">
  10. <text>line1</text>
  11. </popover-item>
  12. <popover-item>
  13. <text>line2</text>
  14. </popover-item>
  15. </view>
  16. </popover>
  1. Page({
  2. data: {
  3. position: 'bottomRight',
  4. show: false,
  5. showMask: true,
  6. },
  7. onMaskClick() {
  8. this.setData({
  9. show: false,
  10. });
  11. },
  12. onShowPopoverTap() {
  13. this.setData({
  14. show: true,
  15. });
  16. },
  17. itemTap1() {
  18. my.alert({
  19. content: '点击1',
  20. });
  21. },
  22. });