# 7.1 蒙层（Overlay）
用于弹窗出现时，遮罩底部内容，避免干扰。
# 蒙层样式
默认浅色模式时为黑色 30% 遮罩；启用 `need-dark-mode` 且处于深色模式时为黑色 70% 遮罩。可通过 `opacity` 覆盖默认透明度。
# dof-overlay 蒙层组件
Dolphin Weex 蒙层组件。
# 实例
# 基础用法
<template>
<div class="page">
<dof-button text="点击打开蒙层" @dofButtonClicked="openOverlay"></dof-button>
<dof-overlay
:show="show"
:opacity="0.3"
@dofOverlayBodyClicked="closeOverlay"
></dof-overlay>
</div>
</template>
<script>
import { DofButton, DofOverlay } from 'dolphin-intl-ui'
export default {
components: { DofButton, DofOverlay },
data() {
return {
show: false,
}
},
methods: {
openOverlay() {
this.show = true
},
closeOverlay() {
this.show = false
},
},
}
</script>
<style scoped>
.page {
flex: 1;
align-items: center;
justify-content: center;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
# Attributes
| Prop | Type | Required | Default | Description |
|---|---|---|---|---|
show | Boolean | N | true | 是否显示蒙层 |
opacity | Number | String | N | - | 蒙层透明度，取值 0 至 1；未设置时由当前主题决定 |
has-animation | Boolean | N | true | 是否启用蒙层显示和隐藏动画 |
duration | Number | String | N | 300 | 动画时长，单位为毫秒 |
timing-function | Array | N | ['ease-in', 'ease-out'] | 显示和隐藏动画的缓动函数 |
can-auto-close | Boolean | N | true | 点击蒙层后是否执行关闭动画并触发 dofOverlayBodyClicked；仍需由父组件更新 show 以完成声明式隐藏 |
need-dark-mode | Boolean | N | false | 是否启用 M-dark/T-dark 内置暗黑适配 |
设置 :need-dark-mode="true" 可启用内置暗黑配色，主题初始化与构建配置见 接入说明。
关闭通知只触发一次，旧动画不会干扰新打开的遮罩。
# Events
| 事件名 | 说明 | 回调参数 |
|---|---|---|
dofOverlayBodyClicked | 点击蒙层时触发；can-auto-close 为 true 时在关闭动画开始时通知一次 | {} |