使用antd-mini反饋組件Popover建立小程式氣泡菜單-移動開發平台 mPaaS-阿里雲

點擊元素，彈出氣泡式的菜單。只可由導覽列上表徵圖喚起，通常用於收納低頻使用的功能。

屬性

Popover

屬性	類型	必填	預設值	說明
visible	boolean	否	false	是否可見
mode	'dark' \| 'light'	否	'dark'	組件顯示模式
placement	'top' \| 'top-right' \| 'top-left' \| 'bottom' \| 'bottom-left' \| 'bottom-right' \| 'left' \| 'left-top' \| 'left-bottom' \| 'right' \| 'right-top' \| 'right-bottom'	否	'bottom-right'	方向
className	string	否	-	類名
mask	boolean	否	false	是否展示蒙層
maskClosable	boolean	否	true	是否可點擊蒙層關閉
fixMaskFull	boolean	否	false	用以解決遮罩層受到 transform 影響而顯示不全的問題

PopoverItem

屬性	類型	必填	預設值	說明
icon	string	否	-	表徵圖類型
className	string	否	-	類名

事件

Popover

事件名	說明	類型
onVisibleChange	組件隱藏/顯示切換，觸發回調	`( visible: boolean, mode: 'component' \| 'mask' ) => void`

PopoverItem

事件名	說明	類型
onTap	點擊組件，觸發回調	`() => void`

插槽

Popover

名稱	說明
items	tooltip 提示插槽，可以使用 PopoverItem 渲染列表

PopoverItem

名稱	說明
icon	表徵圖插槽

樣式類

Popover

類名	說明
amd-popover	整體樣式
amd-popover-container	主體內容樣式
amd-popover-content	內容樣式
amd-popover-arrow	箭頭樣式
amd-popover-inner	內部內容樣式
amd-popover-inner-pseudo	tooltip 內容整體樣式

類名	說明
amd-popover-item	整體樣式
amd-popover-item-icon	表徵圖樣式
amd-popover-item-icon-item	表徵圖樣式
amd-popover-item-text	文字樣式

程式碼範例

基本使用

index.axml 的程式碼範例如下：

<view>
  <demo-block title="基礎用法">
    <view class="wrap dark">
      <popover 
        placement="bottom"
        visible="{{showDark}}"
        onVisibleChange="handleDarkVisibleChange">
        <button inlineSize="large" inline>點我</button>
        <view slot="items" class="tooltip">Hello World</view>
      </popover>
    </view>
  </demo-block>
  <demo-block title="淺色氣泡">
    <view class="wrap">
      <popover 
        placement="right"
        mode="light"
        visible="{{showLight}}"
        onVisibleChange="handleLightVisibleChange">
        <button inlineSize="large" inline>點我</button>
        <view slot="items" class="tooltip">Hello World</view>
      </popover>
    </view>
  </demo-block>
  <demo-block title="氣泡位置" className="multi-demo">
    <view class="multi-wrap">
      <popover 
        placement="{{placement}}"
        visible="{{show}}"
        mask="{{showMask}}"
        onVisibleChange="handleVisibleChange">
        <view class="multi">
          <view>點擊{{show ? '隱藏' : '顯示'}}</view>
          <view>
            {{placement}}
          </view>
        </view>
        <view slot="items" class="tooltip">
          <view>Popover</view> 
          <view>
            Content
          </view>
        </view>
      </popover>
    </view>
    <view class="demo-btn-container">
      <button 
        class="demo-btn"
        onTap="handleNextPosition">
        下個位置
      </button>
      <button 
        class="demo-btn"
        onTap="handleToggleMask">
        {{showMask?'隱藏':'顯示'}}蒙層
      </button>
    </view>
  </demo-block>
</view>

index.js 的程式碼範例如下：

const placement = [
  'top',
  'top-right',
  'top-left',
  'bottom',
  'bottom-left',
  'bottom-right',
  'left',
  'left-top',
  'left-bottom',
  'right',
  'right-top',
  'right-bottom',
];
Page({
  data: {
    placement: placement[0],
    show: true,
    showMask: false,
    showLight: true,
    showDark: true,
  },
  handleLightVisibleChange(e) {
    this.setData({
      showLight: e,
    });
  },
  handleDarkVisibleChange(e) {
    this.setData({
      showDark: e,
    });
  },
  handleNextPosition() {
    let index = placement.indexOf(this.data.placement);
    index = index >= placement.length - 1 ? 0 : index + 1;
    this.setData({
      show: true,
      placement: placement[index],
    });
  },
  handleVisibleChange(visible, mode) {
    this.setData({
      show: visible,
    });
    if (mode === 'mask') {
      my.showToast({ content: '點擊mask關閉', duration: 2000 });
    }
  },
  handleToggleMask() {
    this.setData({
      showMask: !this.data.showMask,
    });
  },
});

index.acss 的程式碼範例如下：

.wrap {
  display: flex;
}
.wrap.dark {
  padding-bottom: 100rpx;
}
.wrap.dark .tooltip {
  color: #fff;
}
.wrap .tooltip {
  white-space: nowrap;
  font-size: 24rpx;
  padding: 16rpx;
}
.multi-demo .demo-block-content {
  background: transparent;
}

.multi-wrap {
  height: 600rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}
.multi-wrap .multi {
  background: #aaa;
  border-radius: 12rpx;
  height: 200rpx;
  width: 200rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
.multi-wrap .tooltip {
  color: #fff;
  font-size: 24rpx;
  padding: 16rpx;
}
.demo-btn-container {
  display: flex;
  justify-content: space-around;
}

.demo-btn {
  width: 45%;
}

index.json 的程式碼範例如下：

{
  "defaultTitle": "PopoverBase",
  "usingComponents": {
    "popover": "antd-mini/es/Popover/index",
    "demo-block": "../../components/DemoBlock/index",
    "button": "antd-mini/es/Button/index"
  }
}

結合 PopoverItem 組件使用

index.axml 的程式碼範例如下：

<view>
  <demo-block title="深色氣泡菜單">
    <view class="wrap">
      <popover 
        placement="bottom-left"
        visible="{{showDark}}"
        mask
        onVisibleChange="handleDarkVisibleChange">
        <button inline inlineSize="large">點我</button>
        <block slot="items">
          <popover-item 
            onTap="handleTapItem"
            icon="ScanningOutline"
            data-type="showDark"
            data-name="掃一掃">
            掃一掃
          </popover-item>

          <popover-item 
            onTap="handleTapItem"
            icon="ReceivePaymentOutline"
            data-type="showDark"
            data-name="付錢/收錢">
            付錢/收錢
          </popover-item>

          <popover-item 
            onTap="handleTapItem"
            icon="TransportQRcodeOutline"
            data-type="showDark"
            data-name="乘車碼">
            乘車碼
          </popover-item>
          <popover-item 
            onTap="handleTapItem"
            data-type="showDark"
            data-name="icon 插槽">
            <image
              slot="icon"
              mode="scaleToFill"
              src="{{url}}"
              style="width: 100%;height: 100%;"/>
            icon 插槽
          </popover-item>
        </block>
      </popover>
    </view>
  </demo-block>
  <demo-block title="淺色氣泡菜單">
    <view class="wrap">
      <popover 
        placement="bottom-left"
        visible="{{showLight}}"
        mode="light"
        mask
        onVisibleChange="handleLightVisibleChange">
        <button inline inlineSize="large">點我</button>
        <block slot="items">
          <popover-item 
            onTap="handleTapItem"
            icon="ScanningOutline"
            data-type="showLight"
            data-name="掃一掃">
            掃一掃
          </popover-item>

          <popover-item 
            onTap="handleTapItem"
            icon="ReceivePaymentOutline"
            data-type="showLight"
            data-name="付錢/收錢">
            付錢/收錢
          </popover-item>

            <popover-item 
              onTap="handleTapItem"
              icon="TransportQRcodeOutline"
              data-type="showLight"
              data-name="乘車碼">
              乘車碼
          </popover-item>
          <popover-item 
            onTap="handleTapItem"
            data-type="showLight"
            data-name="icon 插槽">
            <image
              slot="icon"
              mode="scaleToFill"
              src="{{url}}"
              style="width: 100%;height: 100%;"/>
            icon 插槽
          </popover-item>
        </block>
      </popover>
    </view>
  </demo-block>
  <demo-block title="無表徵圖氣泡菜單">
    <view class="wrap">
      <popover 
        placement="bottom-left"
        visible="{{showNoIcon}}"
        mask
        onVisibleChange="handleNoIconVisibleChange">
        <button inline inlineSize="large">點我</button>
        <block slot="items">
          <popover-item 
            onTap="handleTapItem"
            data-type="showNoIcon"
            data-name="掃一掃">
            掃一掃
          </popover-item>

          <popover-item 
            onTap="handleTapItem"
            data-type="showNoIcon"
            data-name="付錢/收錢">
            付錢/收錢
          </popover-item>

          <popover-item 
            onTap="handleTapItem"
            data-type="showNoIcon"
            data-name="乘車碼">
            乘車碼
          </popover-item>
        </block>
      </popover>
    </view>
  </demo-block>
  
</view>

index.js 的程式碼範例如下：

Page({
  data: {
    showLight: false,
    showDark: false,
    showNoIcon: false,
    url: 'https://gw.alipayobjects.com/mdn/rms_ce4c6f/afts/img/A*XMCgSYx3f50AAAAAAAAAAABkARQnAQ',
  },
  handleLightVisibleChange(e, mode) {
    this.setData({
      showLight: e,
    });
    if (mode === 'mask') {
      my.showToast({ content: '點擊mask關閉', duration: 2000 });
    }
  },
  handleDarkVisibleChange(e, mode) {
    this.setData({
      showDark: e,
    });
    if (mode === 'mask') {
      my.showToast({ content: '點擊mask關閉', duration: 2000 });
    }
  },
  handleNoIconVisibleChange(e, mode) {
    this.setData({
      showNoIcon: e,
    });
    if (mode === 'mask') {
      my.showToast({ content: '點擊mask關閉', duration: 2000 });
    }
  },
  handleTapItem(e) {
    this.setData({
      [e.target.dataset.type]: false,
    });
    my.showToast({ content: `點擊了${e.target.dataset.name}` });
  },
});

index.acss 的程式碼範例如下：

.wrap {
  display: flex;
}

index.json 的程式碼範例如下：

{
  "defaultTitle": "Popover：結合 PopoverItem 組件",
  "usingComponents": {
    "popover": "antd-mini/es/Popover/index",
    "popover-item": "antd-mini/es/Popover/PopoverItem/index",
    "demo-block": "../../components/DemoBlock/index",
    "button": "antd-mini/es/Button/index"
  }
}