Used to display pop-up windows, information prompts, etc., and supports multiple pop-up layers to display.
\nRegister component globally via app.use, refer to Component Registration for more registration ways.
import { createApp } from 'vue';\nimport { Popup } from 'vant';\n\nconst app = createApp();\napp.use(Popup);\n<van-cell title="Show Popup" is-link @click="showPopup" />\n<van-popup v-model:show="show" :style="{ padding: '64px' }">Content</van-popup>\nimport { ref } from 'vue';\n\nexport default {\n setup() {\n const show = ref(false);\n const showPopup = () => {\n show.value = true;\n };\n return {\n show,\n showPopup,\n };\n },\n};\nUse position prop to set Popup display position.
The default position is center, it can be set to top, bottom, left, right.
top or bottom, the default width is consistent with the screen width, and the height of the Popup depends on the height of the content.left or right side, the width and height are not set by default, and the width and height of the popup depend on the width and height of the content.<!-- top popup -->\n<van-popup v-model:show="showTop" position="top" :style="{ height: '30%' }" />\n\n<!-- bottom popup -->\n<van-popup\n v-model:show="showBottom"\n position="bottom"\n :style="{ height: '30%' }"\n/>\n\n<!-- left popup -->\n<van-popup\n v-model:show="showLeft"\n position="left"\n :style="{ width: '30%', height: '100%' }"\n/>\n\n<!-- Popup on the right -->\n<van-popup\n v-model:show="showRight"\n position="right"\n :style="{ width: '30%', height: '100%' }"\n/>\n<van-popup\n v-model:show="show"\n closeable\n position="bottom"\n :style="{ height: '30%' }"\n/>\n<!-- Custom Icon -->\n<van-popup\n v-model:show="show"\n closeable\n close-icon="close"\n position="bottom"\n :style="{ height: '30%' }"\n/>\n<!-- Icon Position -->\n<van-popup\n v-model:show="show"\n closeable\n close-icon-position="top-left"\n position="bottom"\n :style="{ height: '30%' }"\n/>\nAfter setting the round prop, the Popup will add different rounded corner styles according to the position.
<!-- Round Popup (center) -->\n<van-popup v-model:show="showCenter" round :style="{ padding: '64px' }" />\n\n<!-- Round Popup (bottom) -->\n<van-popup\n v-model:show="showBottom"\n round\n position="bottom"\n :style="{ height: '30%' }"\n/>\nPopup supports following events:
\nclick: Emitted when Popup is clicked.click-overlay: Emitted when overlay is clicked.click-close-icon: Emitted when close icon is clicked.<van-cell title="Listen Click Events" is-link @click="show = true" />\n<van-popup\n v-model:show="show"\n position="bottom"\n :style="{ height: '30%' }"\n closeable\n @click-overlay="onClickOverlay"\n @click-close-icon="onClickCloseIcon"\n/>\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n const onClickOverlay = () => {\n showToast('click-overlay');\n };\n const onClickCloseIcon = () => {\n showToast('click-close-icon');\n };\n return {\n show,\n onClickOverlay,\n onClickCloseIcon,\n };\n },\n};\nWhen the Popup is opened or closed, the following events will be emitted:
\nopen: Emitted immediately when the Popup is opened.opened: Emitted when the Popup is opened and the animation ends.close: Emitted immediately when the Popup is closed.closed: Emitted when the Popup is closed and the animation ends.<van-cell title="Listen to display events" is-link @click="show = true" />\n<van-popup\n v-model:show="show"\n position="bottom"\n :style="{ height: '30%' }"\n @open="showToast('open')"\n @opened="showToast('opened')"\n @close="showToast('close')"\n @closed="showToast('closed')"\n/>\nimport { ref } from 'vue';\nimport { showToast } from 'vant';\n\nexport default {\n setup() {\n const show = ref(false);\n return {\n show,\n showToast,\n };\n },\n};\nUse teleport prop to specify mount location.
<!-- teleport to body -->\n<van-popup v-model:show="show" teleport="body" />\n\n<!-- teleport to #app -->\n<van-popup v-model:show="show" teleport="#app" />\n| Attribute | \nDescription | \nType | \nDefault | \n
|---|---|---|---|
| v-model:show | \nWhether to show popup | \nboolean | \nfalse | \n
| overlay | \nWhether to show overlay | \nboolean | \ntrue | \n
| position | \nCan be set to top bottom right left | \nstring | \ncenter | \n
| overlay-class | \nCustom overlay class | \nstring | Array | object | \n- | \n
| overlay-style | \nCustom overlay style | \nobject | \n- | \n
| duration | \nTransition duration, unit second | \nnumber | string | \n0.3 | \n
| z-index | \nSet the z-index to a fixed value | \nnumber | string | \n2000+ | \n
| round | \nWhether to show round corner | \nboolean | \nfalse | \n
| lock-scroll | \nWhether to lock background scroll | \nboolean | \ntrue | \n
| lazy-render | \nWhether to lazy render util appeared | \nboolean | \ntrue | \n
| close-on-popstate | \nWhether to close when popstate | \nboolean | \nfalse | \n
| close-on-click-overlay | \nWhether to close when overlay is clicked | \nboolean | \ntrue | \n
| closeable | \nWhether to show close icon | \nboolean | \nfalse | \n
| close-icon | \nClose icon name | \nstring | \ncross | \n
| close-icon-position | \nClose Icon Position, can be set to top-left bottom-left bottom-right | \nstring | \ntop-right | \n
| before-close | \nCallback function before close | \n(action: string) => boolean | Promise<boolean> | \n- | \n
| icon-prefix | \nIcon className prefix | \nstring | \nvan-icon | \n
| transition | \nTransition, equivalent to name prop of transition | \nstring | \n- | \n
| transition-appear | \nWhether to apply transition on initial render | \nboolean | \nfalse | \n
| teleport | \nSpecifies a target element where Popup will be mounted | \nstring | Element | \n- | \n
| safe-area-inset-top | \nWhether to enable top safe area adaptation | \nboolean | \nfalse | \n
| safe-area-inset-bottom | \nWhether to enable bottom safe area adaptation | \nboolean | \nfalse | \n
| Event | \nDescription | \nArguments | \n
|---|---|---|
| click | \nEmitted when Popup is clicked | \nevent: MouseEvent | \n
| click-overlay | \nEmitted when overlay is clicked | \nevent: MouseEvent | \n
| click-close-icon | \nEmitted when close icon is clicked | \nevent: MouseEvent | \n
| open | \nEmitted immediately when Popup is opened | \n- | \n
| close | \nEmitted immediately when Popup is closed | \n- | \n
| opened | \nEmitted when Popup is opened and the animation ends | \n- | \n
| closed | \nEmitted when Popup is closed and the animation ends | \n- | \n
| Name | \nDescription | \n
|---|---|
| default | \nContent of Popup | \n
| overlay-content | \nContent of Popup overlay | \n
The component exports the following type definitions:
\nimport type {\n PopupProps,\n PopupPosition,\n PopupInstance,\n PopupCloseIconPosition,\n} from 'vant';\nThe component provides the following CSS variables, which can be used to customize styles. Please refer to ConfigProvider component.
\n| Name | \nDefault Value | \nDescription | \n
|---|---|---|
| --van-popup-background | \nvar(--van-background-2) | \n- | \n
| --van-popup-transition | \ntransform var(--van-duration-base) | \n- | \n
| --van-popup-round-radius | \n16px | \n- | \n
| --van-popup-close-icon-size | \n22px | \n- | \n
| --van-popup-close-icon-color | \nvar(--van-gray-5) | \n- | \n
| --van-popup-close-icon-margin | \n16px | \n- | \n
| --van-popup-close-icon-z-index | \n1 | \n- | \n