Vant3 Popover 氣泡彈出框

基礎(chǔ)用法

當(dāng) Popover 彈出時，會基于 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 { Toast } from 'vant';

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

    // 通過 actions 屬性來定義菜單選項
    const actions = [
      { text: '選項一' },
      { text: '選項二' },
      { text: '選項三' },
    ];
    const onSelect = (action) => Toast(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: '選項一' },
      { 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è)位置

展示圖標(biāo)

在 actions 數(shù)組中，可以通過 icon 字段來定義選項的圖標(biāo)，支持傳入圖標(biāo)名稱或圖片鏈接。

<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: '選項一', 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)容

通過默認(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="選項"
      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 };
  },
};

Props

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

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

Events

Slots

樣式變量

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

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

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