更新记录

1.0.0（2026-10-12） 下载此版本

  • 初始版本：基于 Vue3 + TS 实现 vant-overlay 遮罩层组件。
  • 支持 show / zIndex / duration / lockScroll / background 属性。
  • 使用原生 Vue <transition> 实现 opacity 淡入淡出。
  • 通过 event.target === event.currentTarget 区分点遮罩本体与点内容区，点遮罩外抛 click 与 update:show(false)。
  • 样式零硬编码，统一走宿主 uni.scss 的 $uni-* 令牌。

平台兼容性

uni-app(3.8.5)

Vue2 Vue3 Chrome Safari app-vue app-nvue Android iOS 鸿蒙
- √ √ √ √ √ √ √ √
微信小程序 支付宝小程序 抖音小程序 百度小程序 快手小程序 京东小程序 鸿蒙元服务 QQ小程序 飞书小程序 小红书小程序 快应用-华为 快应用-联盟
√ √ √ √ √ √ √ √ √ √ √ √

uni-app x(3.8.5)

Chrome Safari Android iOS 鸿蒙 微信小程序
- - - - - -

其他

多语言 暗黑模式 宽屏模式 蒸汽模式
× × √ ×

vant-overlay 遮罩层

轻量、可定制的 vant-overlay 遮罩层组件，常用于弹窗、浮层等场景的背景遮罩。零业务耦合，行为全部通过 defineEmits 外抛。

Props

参数 说明 类型 默认值
show 是否显示遮罩层（支持 v-model:show） boolean false
zIndex 遮罩层 z-index number 1
duration 动画时长，单位 ms（传 0 关闭淡入） number 300
lockScroll 是否锁定背景滚动 boolean true
background 自定义遮罩背景色（留空走 mask 兜底） string ''（即 $uni-bg-color-mask）

Events

事件名 说明 回调参数
update:show 显示状态变化时触发（双向绑定） boolean
click 点击遮罩本体（非内容区）时触发 无

Slots

名称 说明
default 浮层内容，渲染在遮罩层之上

平台兼容

支持 H5 / App（Vue、NVue）/ 各端小程序（Vue3）。

隐私、权限声明

1. 本插件需要申请的系统权限列表：

无

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明：

无

3. 本插件是否包含广告，如包含需详细说明广告表达方式、展示频率：

无

许可协议

MIT协议
评论列表 撰写评论 向官方投诉

暂无用户评论。