更新记录

0.1.0（2026-07-31） 下载此版本

  • 初版 nax-overlay 全屏遮罩
  • show / v-model:show、zIndex、duration、color、closeOnClick
  • 默认插槽叠内容；click / open / opened / close
  • 鸿蒙 opacity 三阶段淡入淡出；其它端 class + opacity 过渡

平台兼容性

uni-app x(4.25)

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

其他

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

# nax-overlay

全屏遮罩层（弹层底层）。用于压暗页面、拦截点击，可叠加自定义内容（如 nax-loading）。

安装

放入 uni_modules/nax-overlay，easycom 自动注册。

基础用法

<nax-overlay :show="visible" @click="visible = false"></nax-overlay>
<!-- v-model + 点遮罩关闭 -->
<nax-overlay v-model:show="visible" close-on-click></nax-overlay>

遮罩 + 内容

<nax-overlay :show="loading">
    <nax-loading vertical text="加载中" type="primary"></nax-loading>
</nax-overlay>

Props

属性 类型 默认 说明
show boolean false 是否显示；支持 v-model:show
z-index number 1000 层级
duration number 280 淡入淡出 ms；0 无动画
color string '' 遮罩色；空则 --nax-color-mask
close-on-click boolean false 点遮罩时 update:show=false
custom-class string '' 根节点扩展 class
custom-style string '' 根节点扩展 style

Events

事件 说明
update:show 显隐变更
click 点击遮罩（点内容不触发）
open 进场开始
opened 进场结束
close 退场结束并卸载

插槽

名称 说明
default 叠在遮罩中央的内容

依赖

  • nax-ui-theme（可选，提供 --nax-color-mask）

说明

  1. 完整弹层（定位面板）请用 nax-picker；本组件只负责蒙层。
  2. 鸿蒙端淡入淡出走 opacity 三阶段，避免首帧闪黑。
  3. Dialog / ActionSheet 等仍使用 nax-picker 内置 mask；本组件面向自定义浮层与独立蒙层场景。

隐私、权限声明

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

无

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

无

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

无

许可协议

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

暂无用户评论。