Vant3 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 { Toast } 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) => 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: '選項(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)或圖片鏈接。

<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 };
  },
};

Props

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

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

Events

Slots

樣式變量

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

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

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