/*! For license information please see 5412.fcb8169a.js.LICENSE.txt */ (self.webpackChunk=self.webpackChunk||[]).push([["5412"],{96237:function(s,n,a){"use strict";a.r(n);var t=a("80681");let l=["innerHTML"];n.default={setup:()=>({html:""}),render:()=>((0,t.wg)(),(0,t.iD)("div",{class:"van-doc-markdown-body",innerHTML:'

Popover

\n

Intro

\n

Used to display some content on top of another.

\n

Install

\n

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

\n
import { createApp } from 'vue';\nimport { Popover } from 'vant';\n\nconst app = createApp();\napp.use(Popover);\n
\n

Usage

\n

Basic Usage

\n
<van-popover v-model:show="showPopover" :actions="actions" @select="onSelect">\n  <template #reference>\n    <van-button type="primary">Light Theme</van-button>\n  </template>\n</van-popover>\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const showPopover = ref(false);\n    const actions = [\n      { text: 'Option 1' },\n      { text: 'Option 2' },\n      { text: 'Option 3' },\n    ];\n    const onSelect = (action) => showToast(action.text);\n\n    return {\n      actions,\n      onSelect,\n      showPopover,\n    };\n  },\n};\n
\n

Dark theme

\n

Using the theme prop to change the style of Popover.

\n
<van-popover v-model:show="showPopover" theme="dark" :actions="actions">\n  <template #reference>\n    <van-button type="primary">Dark Theme</van-button>\n  </template>\n</van-popover>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const showPopover = ref(false);\n    const actions = [\n      { text: 'Option 1' },\n      { text: 'Option 2' },\n      { text: 'Option 3' },\n    ];\n\n    return {\n      actions,\n      showPopover,\n    };\n  },\n};\n
\n

Horizontal

\n

After setting the actions-direction prop to horizontal, the actions will be arranged horizontally.

\n
<van-popover\n  v-model:show="showPopover"\n  :actions="actions"\n  actions-direction="horizontal"\n>\n  <template #reference>\n    <van-button type="primary">Horizontal</van-button>\n  </template>\n</van-popover>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const showPopover = ref(false);\n    const actions = [\n      { text: 'Option 1' },\n      { text: 'Option 2' },\n      { text: 'Option 3' },\n    ];\n\n    return {\n      actions,\n      showPopover,\n    };\n  },\n};\n
\n

Placement

\n
<van-popover placement="top" />\n
\n

placement supports the following values:

\n
top           # Top middle\ntop-start     # Top left\ntop-end       # Top right\nleft          # Left middle\nleft-start    # Left top\nleft-end      # Left bottom\nright         # Right middle\nright-start   # Right top\nright-end     # Right bottom\nbottom        # Bottom middle\nbottom-start  # Bottom left\nbottom-end    # Bottom right\n
\n

Show Icon

\n
<van-popover v-model:show="showPopover" :actions="actions">\n  <template #reference>\n    <van-button type="primary">Show Icon</van-button>\n  </template>\n</van-popover>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const showPopover = ref(false);\n    const actions = [\n      { text: 'Option 1', icon: 'add-o' },\n      { text: 'Option 2', icon: 'music-o' },\n      { text: 'Option 3', icon: 'more-o' },\n    ];\n\n    return {\n      actions,\n      showPopover,\n    };\n  },\n};\n
\n

Disable Action

\n

Using the disabled option to disable an action.

\n
<van-popover v-model:show="showPopover" :actions="actions">\n  <template #reference>\n    <van-button type="primary">Disable Action</van-button>\n  </template>\n</van-popover>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const showPopover = ref(false);\n    const actions = [\n      { text: 'Option 1', disabled: true },\n      { text: 'Option 2', disabled: true },\n      { text: 'Option 3' },\n    ];\n\n    return {\n      actions,\n      showPopover,\n    };\n  },\n};\n
\n

Custom Content

\n
<van-popover v-model:show="showPopover">\n  <van-grid\n    square\n    clickable\n    :border="false"\n    column-num="3"\n    style="width: 240px;"\n  >\n    <van-grid-item\n      v-for="i in 6"\n      :key="i"\n      text="Option"\n      icon="photo-o"\n      @click="showPopover = false"\n    />\n  </van-grid>\n  <template #reference>\n    <van-button type="primary">Custom Content</van-button>\n  </template>\n</van-popover>\n
\n
import { ref } from 'vue';\n\nexport default {\n  setup() {\n    const showPopover = ref(false);\n    return { showPopover };\n  },\n};\n
\n

Uncontrolled

\n

You can use Popover as a controlled or uncontrolled component:

\n\n
<van-popover :actions="actions" position="top-start" @select="onSelect">\n  <template #reference>\n    <van-button type="primary">Uncontrolled</van-button>\n  </template>\n</van-popover>\n
\n
import { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n  setup() {\n    const actions = [\n      { text: 'Option 1' },\n      { text: 'Option 2' },\n      { text: 'Option 3' },\n    ];\n    const onSelect = (action) => showToast(action.text);\n    return {\n      actions,\n      onSelect,\n    };\n  },\n};\n
\n

API

\n

Props

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
AttributeDescriptionTypeDefault
v-model:showWhether to show Popoverbooleanfalse
actionsActionsPopoverAction[][]
actions-direction v4.4.1Direction of actions, can be set to horizontalPopoverActionsDirectionvertical
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-classCustom overlay classstring | Array | object-
overlay-styleCustom overlay styleobject-
show-arrowWhether to show arrowbooleantrue
close-on-click-actionWhether to close when clicking actionbooleantrue
close-on-click-outsideWhether to close when clicking outsidebooleantrue
close-on-click-overlayWhether to close when clicking overlaybooleantrue
teleportSpecifies a target element where Popover will be mountedstring | Elementbody
icon-prefixIcon className prefixstringvan-icon
\n

Data Structure of PopoverAction

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

Events

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
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
\n

Slots

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDescriptionSlotProps
defaultCustom content-
referenceReference Element-
actionCustom the content of option{ action: PopoverAction, index: number }
\n

Types

\n

The component exports the following type definitions:

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

Theming

\n

CSS Variables

\n

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

\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n
NameDefault ValueDescription
--van-popover-arrow-size6px-
--van-popover-radiusvar(--van-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-horizontal-action-height34px-
--van-popover-horizontal-action-icon-size16px-
--van-popover-light-text-colorvar(--van-text-color)-
--van-popover-light-backgroundvar(--van-background-2)-
--van-popover-light-action-disabled-text-colorvar(--van-text-color-3)-
--van-popover-dark-text-colorvar(--van-white)-
--van-popover-dark-background#4a4a4a-
--van-popover-dark-action-disabled-text-colorvar(--van-text-color-2)-
\n
'},null,8,l))}}}]);