Overlay 遮罩层

创建一个遮罩层，用于强调页面特定内容

演示

9:41

代码示例

<!-- 操作 -->
  <re-button theme="primary" @click="visible = true">显示遮罩</re-button>

<!-- 事件日志 -->
  <re-overlay :key="current" :visible="visible" :zIndex="currentConfig.zIndex" :duration="currentConfig.duration" :customStyle="currentConfig.customStyle" @update:visible="onVisibleUpdate" > <view v-if="currentConfig.showContent" class="demo-overlay-inner"> <text class="demo-overlay-text">遮罩层内容</text> </view> </re-overlay>

引入

推荐使用 easycom 模式，配置后无需手动 import 即可直接使用 <re-overlay />。

API

Overlay Props

名称	类型	默认值	描述	必传
visible	`boolean`	false	是否显示遮罩层	N
duration	`number`	300	动画时长，单位毫秒	N
zIndex	`number`	1000	元素层级	N
customStyle	`string`	""	自定义样式	N

Overlay Events

名称	参数	描述
update:visible	value: boolean	显隐变化时触发
click	-	点击时触发
visible-change	visible: boolean	显隐变化时触发

Overlay Slots

名称	描述
default	默认插槽

NoticeBar 公告栏

参考 TDesign NoticeBar 示例结构，集中演示基础类型、主题状态、滚动形态与交互控制。

Popover 气泡弹出框

参考 popover 示例，提供基础用法、主题样式和 12 个方向定位演示。

内容锚点

演示
代码示例
引入
API