更新记录

v0.1.1（2026-06-30） 下载此版本

增加closeOnOverlay参数，控制是否点击遮罩关闭

v0.1.0（2026-06-30） 下载此版本

首次上传

平台兼容性

uni-app(3.7.13)

布丁弹窗组件 (pudding-popup)

组件介绍

pudding-popup 是一个布丁弹窗组件，提供了带 3D 翻转缩放入场动画的弹窗效果，支持自定义尺寸、圆角、背景色和动画方向，适用于活动弹窗、通知提示、卡片展示等场景。

组件属性

组件事件

组件方法

组件插槽

使用示例

<script setup lang="ts">
import { ref } from 'vue'
import PuddingPopup from '@/components/wot/popup/pudding-popup.vue'

const showBasic = ref(false)
const showLarge = ref(false)
const showRound = ref(false)
const showColored = ref(false)
const showNoFlip = ref(false)
const showNoOverlayClose = ref(false)
</script>

<template>
  <view class="container">
    <wd-button type="primary" @click="showBasic = true">
      打开布丁弹窗
    </wd-button>

    <wd-button type="primary" @click="showLarge = true">
      打开大尺寸弹窗
    </wd-button>

    <PuddingPopup v-model="showBasic">
      <text>这是一个布丁弹窗</text>
    </PuddingPopup>

    <PuddingPopup v-model="showLarge" width="85vw" height="450px">
      <text>大尺寸布丁弹窗</text>
    </PuddingPopup>

    <PuddingPopup v-model="showRound" border-radius="30px">
      <text>大圆角布丁弹窗</text>
    </PuddingPopup>

    <PuddingPopup v-model="showColored" bg-color="#f2f4fd">
      <text>自定义背景布丁弹窗</text>
    </PuddingPopup>

    <PuddingPopup v-model="showNoFlip" :flip="false">
      <text>无翻转布丁弹窗</text>
    </PuddingPopup>

    <PuddingPopup v-model="showNoOverlayClose" :close-on-overlay="false">
      <text>禁止点击遮罩关闭</text>
    </PuddingPopup>
  </view>
</template>

<style scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}
</style>

注意事项

1. 推荐使用 v-model 双向绑定控制弹窗显示状态，使用方式更简洁
2. 组件默认使用 3D 翻转缩放入场动画，可通过 flip 属性关闭翻转效果
3. 弹窗宽度和高度支持任意 CSS 单位（vw、px、rpx 等）
4. 背景色支持颜色值和 CSS 渐变值（如 linear-gradient）
5. 弹窗内置了关闭按钮，点击可关闭弹窗
6. 点击遮罩层也会触发关闭弹窗
7. 也可通过 ref 调用 open() 和 close() 方法以编程方式控制弹窗