介紹

彈出式的氣泡菜單。

引入

通過(guò)以下方式來(lái)全局注冊(cè)組件，更多注冊(cè)方式請(qǐng)參考組件注冊(cè)。

import { createApp } from 'vue';
import { Popover } from 'vant';

const app = createApp();
app.use(Popover);

代碼演示

基礎(chǔ)用法

當(dāng) Popover 彈出時(shí)，會(huì)基于 ?reference? 插槽的內(nèi)容進(jìn)行定位。

<van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
  <template #reference>
    <van-button type="primary">淺色風(fēng)格</van-button>
  </template>
</van-popover>

import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const showPopover = ref(false);

    // 通過(guò) actions 屬性來(lái)定義菜單選項(xiàng)
    const actions = [
      { text: '選項(xiàng)一' },
      { text: '選項(xiàng)二' },
      { text: '選項(xiàng)三' },
    ];
    const onSelect = (action) => showToast(action.text);

    return {
      actions,
      onSelect,
      showPopover,
    };
  },
};

深色風(fēng)格

Popover 支持淺色和深色兩種風(fēng)格，默認(rèn)為淺色風(fēng)格，將 ?theme? 屬性設(shè)置為 ?dark? 可切換為深色風(fēng)格。

<van-popover v-model:show="showPopover" theme="dark" :actions="actions">
  <template #reference>
    <van-button type="primary">深色風(fēng)格</van-button>
  </template>
</van-popover>

import { ref } from 'vue';

export default {
  setup() {
    const showPopover = ref(false);
    const actions = [
      { text: '選項(xiàng)一' },
      { text: '選項(xiàng)二' },
      { text: '選項(xiàng)三' },
    ];

    return {
      actions,
      showPopover,
    };
  },
};

彈出位置

通過(guò) ?placement? 屬性來(lái)控制氣泡的彈出位置。

<van-popover placement="top" />

?placement? 支持以下值：

top           # 頂部中間位置
top-start     # 頂部左側(cè)位置
top-end       # 頂部右側(cè)位置
left          # 左側(cè)中間位置
left-start    # 左側(cè)上方位置
left-end      # 左側(cè)下方位置
right         # 右側(cè)中間位置
right-start   # 右側(cè)上方位置
right-end     # 右側(cè)下方位置
bottom        # 底部中間位置
bottom-start  # 底部左側(cè)位置
bottom-end    # 底部右側(cè)位置

展示圖標(biāo)

在 ?actions? 數(shù)組中，可以通過(guò) ?icon? 字段來(lái)定義選項(xiàng)的圖標(biāo)，支持傳入圖標(biāo)名稱(chēng)或圖片鏈接，等同于 Icon 組件的 name 屬性。

<van-popover v-model:show="showPopover" :actions="actions">
  <template #reference>
    <van-button type="primary">展示圖標(biāo)</van-button>
  </template>
</van-popover>

import { ref } from 'vue';

export default {
  setup() {
    const showPopover = ref(false);
    const actions = [
      { text: '選項(xiàng)一', icon: 'add-o' },
      { text: '選項(xiàng)二', icon: 'music-o' },
      { text: '選項(xiàng)三', icon: 'more-o' },
    ];

    return {
      actions,
      showPopover,
    };
  },
};

禁用選項(xiàng)

在 ?actions? 數(shù)組中，可以通過(guò) ?disabled? 字段來(lái)禁用某個(gè)選項(xiàng)。

<van-popover v-model:show="showPopover" :actions="actions">
  <template #reference>
    <van-button type="primary">禁用選項(xiàng)</van-button>
  </template>
</van-popover>

import { ref } from 'vue';

export default {
  setup() {
    const showPopover = ref(false);
    const actions = [
      { text: '選項(xiàng)一', disabled: true },
      { text: '選項(xiàng)二', disabled: true },
      { text: '選項(xiàng)三' },
    ];

    return {
      actions,
      showPopover,
    };
  },
};

自定義內(nèi)容

通過(guò)默認(rèn)插槽，可以在 Popover 內(nèi)部放置任意內(nèi)容。

<van-popover v-model:show="showPopover">
  <van-grid
    square
    clickable
    :border="false"
    column-num="3"
    style="width: 240px;"
  >
    <van-grid-item
      v-for="i in 6"
      :key="i"
      text="選項(xiàng)"
      icon="photo-o"
      @click="showPopover = false"
    />
  </van-grid>
  <template #reference>
    <van-button type="primary">自定義內(nèi)容</van-button>
  </template>
</van-popover>

import { ref } from 'vue';

export default {
  setup() {
    const showPopover = ref(false);
    return { showPopover };
  },
};

非受控模式

你可以把 Popover 當(dāng)做受控組件或非受控組件使用：

• 當(dāng)綁定 ?v-model:show? 時(shí)，Popover 為受控組件，此時(shí)組件的顯示完全由 ?v-model:show? 的值決定。
• 當(dāng)未綁定 ?v-model:show? 時(shí)，Popover 為非受控組件，此時(shí)你可以通過(guò) ?show? 屬性傳入一個(gè)默認(rèn)值，組件值的顯示由組件自身控制。

<van-popover :actions="actions" position="top-start" @select="onSelect">
  <template #reference>
    <van-button type="primary">非受控模式</van-button>
  </template>
</van-popover>

import { ref } from 'vue';
import { showToast } from 'vant';

export default {
  setup() {
    const actions = [
      { text: '選項(xiàng)一' },
      { text: '選項(xiàng)二' },
      { text: '選項(xiàng)三' },
    ];
    const onSelect = (action) => showToast(action.text);
    return {
      actions,
      onSelect,
    };
  },
};

API

Props

PopoverAction 數(shù)據(jù)結(jié)構(gòu)

?actions? 屬性是一個(gè)由對(duì)象構(gòu)成的數(shù)組，數(shù)組中的每個(gè)對(duì)象配置一列，對(duì)象可以包含以下值：

Events

Slots

類(lèi)型定義

組件導(dǎo)出以下類(lèi)型定義：

import type {
  PopoverProps,
  PopoverTheme,
  PopoverAction,
  PopoverTrigger,
  PopoverPlacement,
} from 'vant';

主題定制

樣式變量

組件提供了下列 CSS 變量，可用于自定義樣式，使用方法請(qǐng)參考 ConfigProvider 組件。

常見(jiàn)問(wèn)題

Popover 的點(diǎn)擊事件無(wú)法正確觸發(fā)？

這種情況通常是由于項(xiàng)目中引入了 ?fastclick? 庫(kù)導(dǎo)致的。建議移除 ?fastclick?，或者配置 ?fastclick? 的 ignore 規(guī)則。