Popup

演示

Popup 跨端示例与演示

H5 Live浏览器运行时实时交互

弹出层配送方式

配送方式

展示遮罩、圆角和关闭按钮。

基础用法

<script setup lang="ts">
import { ref } from 'vue'

const visible = ref(false)
</script>

<template>
  <VButton @click="visible = true">
    打开弹出层
  </VButton>
  <VPopup v-model:visible="visible" position="bottom" round closeable>
    <div class="popup-body">
      弹层内容
    </div>
  </VPopup>
</template>

弹出位置

<template>
  <VPopup v-model:visible="visible" position="top" />
  <VPopup v-model:visible="visible" position="bottom" />
  <VPopup v-model:visible="visible" position="left" />
  <VPopup v-model:visible="visible" position="right" />
  <VPopup v-model:visible="visible" position="center" />
</template>

关闭按钮

closeIcon 接收 VIcon 支持的内置名称（例如 close、back、check 或 chevron-left），默认使用 close。需要自定义图标组件或图形内容时，使用 #closeIcon 插槽。

<template>
  <VPopup v-model:visible="visible" closeable close-icon="back" />

  <VPopup v-model:visible="customVisible" closeable>
    <template #closeIcon>
      <VIcon name="check" />
    </template>
  </VPopup>
</template>

Props

Prop	类型	默认值	描述
visible	boolean | undefined	undefined	受控显示状态
defaultVisible	boolean	false	非受控初始显示状态
disabled	boolean | undefined	undefined	禁止内部触发显隐变更
position	'center' | 'top' | 'bottom' | 'left' | 'right'	'bottom'	弹出位置
overlay	boolean	true	是否显示遮罩
closeable	boolean	false	是否显示关闭按钮
closeIcon	string	'close'	传给 VIcon 的内置图标名称
closeIconPosition	'top-left' | 'top-right' | 'bottom-left' | 'bottom-right'	'top-right'	关闭按钮位置标记
round	boolean	false	是否开启圆角态
safeAreaInsetBottom	boolean	false	是否标记底部安全区
lockScroll	boolean	false	显示时锁定页面滚动
closeOnClickOverlay	boolean	true	点击遮罩是否关闭
zIndex	number | string	undefined	弹层层级
duration	number | string	undefined	动画时长，数字按秒处理
destroyOnClose	boolean	true	关闭时是否销毁内容

Events

Event	Payload	描述
update:visible	boolean	受控同步事件
visibleChange	boolean	显隐状态变更
close	void	请求关闭
clickOverlay	void	点击遮罩

Slots

Slot	描述
default	弹层主体内容
closeIcon	替换默认 VIcon 的自定义关闭图标内容

Primitives

PopupRoot 使用 usePopupRoot 管理显隐、遮罩点击和 Escape 关闭；UI 包只保留 Varo 风格组件入口。