Popup 弹出层

介绍

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

基础用法

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

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

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

const show = ref(false);

function showPopup() {
  show.value = true;
}

弹出位置

通过 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

参数	说明	类型	默认值
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'
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
open	打开时触发	-
opened	打开动画结束时触发	-
close	关闭时触发	-
closed	关闭动画结束时触发	-
click-close	点击关闭按钮时触发	MouseEvent
click-overlay	点击遮罩时触发	MouseEvent

Slots

名称	说明
default	自定义内容
title	标题
close	关闭按钮