Popup 弹出层

从屏幕边缘或中心弹出内容的容器组件。

基础用法

通过 v-model:show 控制弹出层的显示与隐藏。

<template>
  <button @click="show = true">打开弹出层</button>

  <dr-popup v-model:show="show">
    <view class="content">弹出层内容</view>
  </dr-popup>
</template>

<script setup>
import { ref } from 'vue'
const show = ref(false)
</script>

弹出位置

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

<!-- 底部弹出 -->
<dr-popup v-model:show="show" position="bottom">
  <view class="content">底部弹出</view>
</dr-popup>

<!-- 顶部弹出 -->
<dr-popup v-model:show="show" position="top">
  <view class="content">顶部弹出</view>
</dr-popup>

<!-- 左侧弹出 -->
<dr-popup v-model:show="show" position="left">
  <view class="content">左侧弹出</view>
</dr-popup>

<!-- 右侧弹出 -->
<dr-popup v-model:show="show" position="right">
  <view class="content">右侧弹出</view>
</dr-popup>

<!-- 中间弹出 -->
<dr-popup v-model:show="show" position="center">
  <view class="content">中间弹出</view>
</dr-popup>

关闭方式

默认点击遮罩层可以关闭弹出层，可以通过 mask-closable 属性禁用。

<dr-popup v-model:show="show" :mask-closable="false">
  <view class="content">
    <text>点击遮罩不会关闭</text>
    <button @click="show = false">关闭</button>
  </view>
</dr-popup>

圆角设置

通过 border-radius 属性设置圆角大小。

<dr-popup v-model:show="show" :border-radius="32">
  <view class="content">圆角弹出层</view>
</dr-popup>

API

Props

参数	说明	类型	默认值
v-model:show	是否显示弹出层	boolean	false
position	弹出位置，可选值：bottom top left right center	string	bottom
mask-closable	点击遮罩是否关闭	boolean	true
show-mask	是否显示遮罩层	boolean	true
z-index	层级	number	5000
safe-area-bottom	是否适配底部安全区域	boolean	true
border-radius	圆角大小（rpx）	number | string	24
duration	动画时长（ms）	number	300

Events

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

Slots

名称	说明
default	弹出层内容