Popup 弹出层

介绍

弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。

基础用法

通过 v-model 控制弹出层是否展示。

<vd-cell title="展示弹出层" is-link @click="show = true" />

<vd-popup v-model="show">
  <view class="box" style="padding: 60px;"></view>
</vd-popup>

const show = ref(false);

函数调用

为了便于使用 Popup，提供了 showPopup、closePopup 函数，用于显示和关闭 Popup，可设置标识指定一个 Popup 组件调用。

open / showPopup 返回 Promise，在 beforeClose 放行关闭时 resolve 当前 data（与 Dialog 一致）；返回 false / 抛错则不 resolve、不关闭。需接收 config 请使用 content 插槽（小程序 default 无法传参）。

WARNING

因小程序无法动态挂载组件，使用时需要页面存在一个 Popup 组件。

<vd-popup name="page" position="center" round closeable>
  <view class="text-box">弹出层内容</view>
</vd-popup>

import { showPopup, showToast } from 'vital-design';

await showPopup({ name: 'page' });

showToast({ message: '已关闭' });

弹出位置

通过 position 属性控制弹出层的位置。

<!-- 顶部弹出 -->
<vd-popup v-model="show" position="top"></vd-popup>

<!-- 底部弹出 -->
<vd-popup v-model="show" position="bottom"></vd-popup>

<!-- 左侧弹出 -->
<vd-popup v-model="show" position="left"></vd-popup>

<!-- 右侧弹出 -->
<vd-popup v-model="show" position="right"></vd-popup>

圆角弹窗

设置 round 属性后，弹窗会根据弹出位置添加不同的圆角样式。

<!-- 中间弹出 -->
<vd-popup v-model="show" round></vd-popup>

<!-- 底部弹出 -->
<vd-popup v-model="show" position="bottom" round></vd-popup>

关闭按钮

通过 closeable 属性控制是否显示关闭按钮。

<vd-popup v-model="show" closeable></vd-popup>

<!-- 上左侧展示关闭按钮 -->
<vd-popup v-model="show" closeable close-position="top-left"></vd-popup>

展示标题

通过 title 属性设置弹出层的标题。

<vd-popup v-model="show" title="标题"></vd-popup>

<!-- 中间展示标题 -->
<vd-popup v-model="show" title="标题" title-align="center"></vd-popup>

弹出动画

通过 transition 属性设置弹出层的动画，动画名称参考 Transition 组件。

<vd-popup v-model="show" transition="zoom-in"></vd-popup>

禁用遮罩点击关闭

通过 close-on-click-overlay 属性设置是否禁用遮罩点击关闭弹层。

<vd-popup v-model="show" :close-on-click-overlay="false"></vd-popup>

禁用遮罩

通过 overlay 属性设置是否禁用遮罩。

<vd-popup v-model="show" :overlay="false"></vd-popup>

API

Props

参数	说明	类型	默认值
name	标识名称，用于函数式调用	string | number	-
data	传递给插槽的数据	object	-
v-model	是否展示	boolean	false
round	是否显示圆角	boolean	false
position	弹出位置	PopupPosition	'center'
transition	动画名称	TransitionName	'fade'
title	标题	string	-
title-align	标题位置	PopupTitleAlign	'left'
closeable	是否显示关闭按钮	boolean	false
close-icon	关闭按钮图标	IconsName	'close'
close-position	关闭按钮位置	PopupClosePosition	'top-right'
before-close	关闭前的回调，入参为当前 data；支持 Promise；返回 false 或抛错阻止关闭	PopupBeforeClose	-
close-on-click-overlay	是否点击遮罩关闭	boolean	true
overlay	是否显示遮罩	boolean	true
overlay-class	遮罩类名	ClassValue	-
overlay-style	遮罩样式	StyleValue	-
z-index	层级	number	2001+
lazy-render	是否懒渲染	boolean	true
cacheable	是否缓存节点，缓存节点后，切换展示状态时不会重新渲染节点	boolean	true
lock-scroll	是否锁定背景	boolean	true

代替原始 Props

参数	说明	类型	默认值
custom-id	根节点id	string	-
custom-class	根节点类名	ClassValue	-
custom-style	根节点样式	StyleValue	-

Events

事件名	说明	回调参数
click	点击时触发	MouseEvent
update:model-value	展示状态更新时触发	boolean
open	打开时触发	-
opened	打开动画结束时触发	-
close	关闭时触发	-
closed	关闭动画结束时触发	-
click-close	点击关闭按钮时触发	MouseEvent
click-overlay	点击遮罩时触发	MouseEvent

Methods

通过 ref 可调用以下方法，函数式请优先使用 showPopup / closePopup / usePopup。

方法名	说明	参数	返回值
open	打开弹出层；beforeClose 放行后 resolve 当前 data	PopupOpenOption<T>	Promise<T>
close	关闭弹出层	-	-

Slots

名称	说明	参数
default	自定义整体内容	-
content	自定义内容区	{ config }
title	标题	{ config }
close	关闭按钮	{ config }

类型定义

组件导出以下类型定义：

import type {
  PopupProps,
  PopupEmits,
  PopupExpose,
  PopupInstance,
  PopupOpenOption,
  PopupBeforeClose,
  PopupPosition,
  PopupTitleAlign,
  PopupClosePosition,
} from 'vital-design';

import {
  showPopup,
  closePopup,
  usePopup,
} from 'vital-design';