Vant4 Popover 氣泡彈出框

介紹

彈出式的氣泡菜單。

引入

通過以下方式來全局注冊組件，更多注冊方式請參考組件注冊。

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

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

代碼演示

基礎用法

當 Popover 彈出時，會基于 ?reference? 插槽的內(nèi)容進行定位。

<van-popover v-model:show="showPopover" :actions="actions" @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 showPopover = ref(false);

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

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

深色風格

Popover 支持淺色和深色兩種風格，默認為淺色風格，將 ?theme? 屬性設置為 ?dark? 可切換為深色風格。

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

import { ref } from 'vue';

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

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

彈出位置

通過 ?placement? 屬性來控制氣泡的彈出位置。

<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è)位置

展示圖標

在 ?actions? 數(shù)組中，可以通過 ?icon? 字段來定義選項的圖標，支持傳入圖標名稱或圖片鏈接，等同于 Icon 組件的 name 屬性。

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

import { ref } from 'vue';

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

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

禁用選項

在 ?actions? 數(shù)組中，可以通過 ?disabled? 字段來禁用某個選項。

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

import { ref } from 'vue';

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

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

自定義內(nèi)容

通過默認插槽，可以在 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="選項"
      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 當做受控組件或非受控組件使用：

• 當綁定 ?v-model:show? 時，Popover 為受控組件，此時組件的顯示完全由 ?v-model:show? 的值決定。
• 當未綁定 ?v-model:show? 時，Popover 為非受控組件，此時你可以通過 ?show? 屬性傳入一個默認值，組件值的顯示由組件自身控制。

<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: '選項一' },
      { text: '選項二' },
      { text: '選項三' },
    ];
    const onSelect = (action) => showToast(action.text);
    return {
      actions,
      onSelect,
    };
  },
};

API

Props

PopoverAction 數(shù)據(jù)結構

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

Events

Slots

類型定義

組件導出以下類型定義：

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

主題定制

樣式變量

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

常見問題

Popover 的點擊事件無法正確觸發(fā)？

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