更新记录

1.0.1（2026-11-12） 下载此版本

新增

• ref 新增 Open() 方法，配合已有 Close() 可编程控制显隐。

优化

• 通过 v-model（modelValue 传 false）关闭时，同样执行缩放退场动画，不再直接消失。
• 打开/关闭增加防重入与定时器清理，快速切换不会叠加动画。
• 动画时长提取为常量（OPEN_DELAY / CLOSE_DURATION）。

平台兼容性

uni-app(5.0)

y-dialog

y-dialog 是面向 uni-app（Vue 3） 的弹窗/遮罩组件，支持 v-model 控制显隐、遮罩点击关闭、缩放动画与透明遮罩。

• 当前版本：1.0.1
• 依赖：强依赖 y-scss（弹窗的定位、遮罩、动画全部依赖它的工具类，缺失时组件无法正常显示）

⚠️ 强依赖 y-scss，必须先安装并引入

组件模板使用的 fixed、t-0、l-0、zinx-99999、d-flex、ai-center、jc-center、bgc-inverse-3、t-ease、t-scale-0、t-scale-1 等类全部来自 y-scss。 未引入 y-scss 时，弹窗会失去全屏定位、遮罩背景和缩放动画，内容会直接平铺在页面上。 package.json 已通过 uni_modules.dependencies 声明该依赖，HBuilderX 导入 y-dialog 时会提示一并安装。

特性

• 两种控制方式：v-model、ref 调用 Open()/Close()。
• 遮罩渐显 + 内容缩放动画；通过 v-model 关闭同样有退场动画。
• 支持点击遮罩关闭、关闭回调、遮罩透明模式。
• 打开/关闭防重入，快速切换不会叠加动画定时器。

属性

事件

用法

方式一：v-model

<template>
  <view>
    <button @click="isShow = true">打开弹窗</button>

    <y-dialog v-model="isShow" @close="onClosed">
      <view class="w-690 glass-bg br-40 o-hidden">
        <view class="bgc-container p-30">
          <text class="fs-26 c-text">弹窗内容</text>
        </view>
      </view>
    </y-dialog>
  </view>
</template>

<script setup>
import { ref } from 'vue'

const isShow = ref(false)

function onClosed() {
  console.log('弹窗已关闭')
}
</script>

方式二：ref 编程控制

<y-dialog ref="dialogRef" :maskClosable="false" v-model="isShow" @close="HandleClose">
  <view class="bgc-container p-30">内容</view>
</y-dialog>

<script setup>
const dialogRef = ref(null)

function Open() {
  dialogRef.value.Open()
}

function Close() {
  dialogRef.value.Close()
}
</script>

说明

• 弹窗内容通过默认插槽传入，样式由使用方决定（如配合 glass-bg、bgc-container）。
• 关闭动画结束后才触发 update:modelValue / close，期间弹窗保留缩放退场。
• maskTransparent 为 true 时遮罩透明，只保留内容与点击关闭行为。
• 组件强依赖 y-scss 的工具类：fixed、t-0、l-0、zinx-99999、d-flex、ai-center、jc-center、bgc-inverse-3、t-ease、t-scale-0、t-scale-1、o-visible，未引入会导致弹窗无法正常显示，详见顶部注意事项。

更新日志

见 changelog.md。