展示组件 - Popover 气泡弹出框 - 《Vant 3.2 移动组件库文档(Vue 3版)》

API
主题定制
常见问题

引入

通过以下方式来全局注册组件，更多注册方式请参考组件注册。

基础用法

当 Popover 弹出时，会基于插槽的内容进行定位。

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

深色风格

Popover 支持浅色和深色两种风格，默认为浅色风格，将 theme 属性设置为 dark 可切换为深色风格。

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

弹出位置

<van-popover placement="top" />

placement 支持以下值：

top           # 顶部中间位置
top-start     # 顶部左侧位置
top-end       # 顶部右侧位置
left          # 左侧中间位置
left-start    # 左侧上方位置
left-end      # 左侧下方位置
right-start   # 右侧上方位置
right-end     # 右侧下方位置
bottom        # 底部中间位置
bottom-start  # 底部左侧位置
bottom-end    # 底部右侧位置

在 actions 数组中，可以通过 icon 字段来定义选项的图标，支持传入图标名称或图片链接。

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

禁用选项

在 actions 数组中，可以通过 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 {
    const showPopover = ref(false);
    const actions = [
      { text: '选项一', disabled: true },
      { text: '选项二', disabled: true },
      { text: '选项三' },
    ];
    return {
      actions,
      showPopover,
    };
  },
};

自定义内容

<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">自定义内容</van-button>
  </template>
</van-popover>

Props

PopoverAction 数据结构

actions 属性是一个由对象构成的数组，数组中的每个对象配置一列，对象可以包含以下值：

Slots

类型定义

组件导出以下类型定义：

import type {
  PopoverTheme,
  PopoverAction,
  PopoverTrigger,
  PopoverPlacement,

样式变量

组件提供了下列 CSS 变量，可用于自定义样式，使用方法请参考 ConfigProvider 组件。

Popover 气泡弹出框