import{o as a,a as t,y as n}from"./vue-libs.b44bc779.js";const e={class:"van-doc-markdown-body"},l=n(`

Popover

Intro

Used to display some content on top of another.

Install

Register component globally via app.use, refer to Component Registration for more registration ways.

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

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

Usage

Basic Usage

<van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">
  <template #reference>
    <van-button type="primary">Light Theme</van-button>
  </template>
</van-popover>

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

export default {
  setup() {
    const showPopover = ref(false);
    const actions = [
      { text: 'Option 1' },
      { text: 'Option 2' },
      { text: 'Option 3' },
    ];
    const onSelect = (action) => Toast(action.text);

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

Dark theme

Using the theme prop to change the style of Popover.

<van-popover v-model:show="showPopover" theme="dark" :actions="actions">
  <template #reference>
    <van-button type="primary">Dark Theme</van-button>
  </template>
</van-popover>

import { ref } from 'vue';

export default {
  setup() {
    const showPopover = ref(false);
    const actions = [
      { text: 'Option 1' },
      { text: 'Option 2' },
      { text: 'Option 3' },
    ];

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

Placement

<van-popover placement="top" />

placement supports the following values:

top           # Top middle
top-start     # Top left
top-end       # Top right
left          # Left middle
left-start    # Left top
left-end      # Left bottom
right         # Right middle
right-start   # Right top
right-end     # Right bottom
bottom        # Bottom middle
bottom-start  # Bottom left
bottom-end    # Bottom right

Show Icon

<van-popover v-model:show="showPopover" :actions="actions">
  <template #reference>
    <van-button type="primary">Show Icon</van-button>
  </template>
</van-popover>

import { ref } from 'vue';

export default {
  setup() {
    const showPopover = ref(false);
    const actions = [
      { text: 'Option 1', icon: 'add-o' },
      { text: 'Option 2', icon: 'music-o' },
      { text: 'Option 3', icon: 'more-o' },
    ];

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

Disable Action

Using the disabled option to disable an action.

<van-popover v-model:show="showPopover" :actions="actions">
  <template #reference>
    <van-button type="primary">Disable Action</van-button>
  </template>
</van-popover>

import { ref } from 'vue';

export default {
  setup() {
    const showPopover = ref(false);
    const actions = [
      { text: 'Option 1', disabled: true },
      { text: 'Option 2', disabled: true },
      { text: 'Option 3' },
    ];

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

Custom Content

<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="Option"
      icon="photo-o"
      @click="showPopover = false"
    />
  </van-grid>
  <template #reference>
    <van-button type="primary">Custom Content</van-button>
  </template>
</van-popover>

import { ref } from 'vue';

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

API

Props

AttributeDescriptionTypeDefault
v-model:showWhether to show Popoverbooleanfalse
actionsActionsPopoverAction[][]
placementPlacementPopoverPlacementbottom
themeTheme, can be set to darkPopoverThemelight
triggerTrigger mode, can be set to manualPopoverTriggerclick
durationTransition duration, unit secondnumber | string0.3
offsetDistance to reference[number, number][0, 8]
overlayWhether to show overlaybooleanfalse
overlay-class v3.0.10Custom overlay classstring | Array | object-
overlay-style v3.0.10Custom overlay styleobject-
show-arrow v3.2.2Whether to show arrowbooleantrue
close-on-click-actionWhether to close when clicking actionbooleantrue
close-on-click-outsideWhether to close when clicking outsidebooleantrue
close-on-click-overlay v3.0.10Whether to close when clicking overlaybooleantrue
teleportSpecifies a target element where Popover will be mountedstring | Elementbody
icon-prefix v3.0.17Icon className prefixstringvan-icon

Data Structure of PopoverAction

KeyDescriptionType
textAction Textstring
iconIconstring
colorAction Colorstring
disabledWhether to be disabledboolean
classNameclassName of the optionstring | Array | object

Events

EventDescriptionArguments
selectEmitted when an action is clickedaction: PopoverAction, index: number
openEmitted when opening Popover-
closeEmitted when closing Popover-
openedEmitted when Popover is opened-
closedEmitted when Popover is closed-
click-overlayEmitted when overlay is clickedevent: MouseEvent

Slots

NameDescriptionSlotProps
defaultCustom content-
referenceReference Element-
action v3.4.0Custom the content of option{ action: PopoverAction, index: number }

Types

The component exports the following type definitions:

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

Theming

CSS Variables

The component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.

NameDefault ValueDescription
--van-popover-arrow-size6px-
--van-popover-border-radiusvar(--van-border-radius-lg)-
--van-popover-action-width128px-
--van-popover-action-height44px-
--van-popover-action-font-sizevar(--van-font-size-md)-
--van-popover-action-line-heightvar(--van-line-height-md)-
--van-popover-action-icon-size20px-
--van-popover-light-text-colorvar(--van-text-color)-
--van-popover-light-background-colorvar(--van-background-color-light)-
--van-popover-light-action-disabled-text-colorvar(--van-text-color-3)-
--van-popover-dark-text-colorvar(--van-white)-
--van-popover-dark-background-color#4a4a4a-
--van-popover-dark-action-disabled-text-colorvar(--van-text-color-2)-
`,18),p=[l],i={__name:"README",setup(o,{expose:s}){return s({frontmatter:{}}),(c,r)=>(a(),t("div",e,p))}};export{i as default};