Popup 弹出层

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

引入

通过 easycom 自动引入，无需手动注册。

代码演示

基础用法

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

<zq-button text="展示弹出层" @click="show = true" />
<zq-popup v-model:show="show">
  <view style="padding: 60rpx;">内容</view>
</zq-popup>

const show = ref(false)

弹出位置

通过 position 属性设置弹出位置，支持 top、bottom、left、right、center，默认为 center。

<!-- 底部弹出 -->
<zq-popup v-model:show="show" position="bottom">
  <view style="height: 400rpx; padding: 32rpx;">底部弹出</view>
</zq-popup>

<!-- 顶部弹出 -->
<zq-popup v-model:show="show" position="top">
  <view style="height: 400rpx; padding: 32rpx;">顶部弹出</view>
</zq-popup>

<!-- 左侧弹出 -->
<zq-popup v-model:show="show" position="left">
  <view style="height: 100%; padding: 32rpx;">左侧弹出</view>
</zq-popup>

<!-- 右侧弹出 -->
<zq-popup v-model:show="show" position="right">
  <view style="height: 100%; padding: 32rpx;">右侧弹出</view>
</zq-popup>

圆角弹窗

通过 round 属性设置圆角弹窗。

<zq-popup v-model:show="show" position="bottom" round>
  <view style="height: 400rpx; padding: 32rpx;">圆角弹窗</view>
</zq-popup>

关闭按钮

通过 closeable 属性显示关闭按钮。

<zq-popup v-model:show="show" closeable>
  <view style="padding: 60rpx;">带关闭按钮</view>
</zq-popup>

标题

通过 title 属性设置弹窗标题。

<zq-popup v-model:show="show" title="标题" closeable position="bottom" round>
  <view style="height: 400rpx; padding: 32rpx;">内容</view>
</zq-popup>

禁止点击遮罩层关闭

通过 :close-on-click-overlay="false" 禁止点击遮罩层关闭弹窗。

<zq-popup v-model:show="show" :close-on-click-overlay="false" closeable>
  <view style="padding: 60rpx;">点击遮罩层不会关闭</view>
</zq-popup>

自定义层级

通过 z-index 属性设置弹窗层级。

<zq-popup v-model:show="show" :z-index="2000">
  <view style="padding: 60rpx;">自定义层级</view>
</zq-popup>

自定义样式

通过 custom-style 属性传入自定义样式对象。

<zq-popup v-model:show="show" :custom-style="{ padding: '32rpx' }">
  <text>自定义样式</text>
</zq-popup>

API

Props

参数	说明	类型	默认值
v-model:show	是否展示弹出层	boolean	false
position	弹出位置	'top' | 'bottom' | 'left' | 'right' | 'center'	'center'
round	是否显示圆角	boolean	false
overlay	是否显示遮罩层	boolean	true
close-on-click-overlay	是否在点击遮罩层后关闭	boolean	true
closeable	是否显示关闭按钮	boolean	false
title	弹窗标题	string	''
z-index	层级	number	1000
custom-style	自定义内容区域样式	object	{}

Events

事件名	说明	回调参数
open	打开弹出层时触发	-
close	关闭弹出层时触发	-
opened	打开弹出层且动画结束后触发	-
closed	关闭弹出层且动画结束后触发	-

Slots

名称	说明
default	弹出层内容

注意事项

• position 为 bottom 时配合 round 使用，会在顶部显示圆角。
• position 为 left 或 right 时，弹出层宽度默认为 70%。
• position 为 center 时，弹出层最小宽度为 560rpx。
• 弹出和关闭均有 0.3s 的过渡动画。

主题定制

变量名	说明
--color-bg-card	弹出层背景色
--color-text-primary	标题文字颜色
--color-text-secondary	关闭按钮颜色