点我扫二维码，查看demo
# Overlay 蒙层组件
# 介绍
用于弹窗出现时，遮罩底部文字，避免干扰。
# 引入
通过以下方式来按需注册组件。
import Vue from 'vue';
import { Overlay } from '@dolphin-iot/ui'
Vue.use(Overlay);
1
2
3
4
2
3
4
# 代码演示
# 基础用法
show 属性用于控制蒙层的显示或者隐藏
<template>
<div class="demo-list">
<mx-overlay :show="show" @click.native="show = !show"></mx-overlay>
<mx-button @click="onToggle">back toggle</mx-button>
</div>
</template>
<script>
export default {
data() {
return {
show: false
};
},
methods: {
onToggle() {
this.show = !this.show;
}
}
};
</script>
<style lang="scss" scoped>
.demo-list{
width: 100%;
height: 100%;
background: #f9f9f9;
font-size: 12px;
overflow-y: auto;
}
.demo-list{
padding-top: 10px;
}
</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
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
# 自定义样式
customStyle 属性用于用户自定义样式
<template>
<div class="demo-list">
<mx-overlay :customStyle="customStyle" :show="show" @click.native="show = !show"></mx-overlay>
<mx-button @click="onToggle">自定义样式</mx-button>
</div>
</template>
<script>
export default {
data() {
return {
show: false,
customStyle: { backgroundColor: 'rgba(0,0,0,0.6)' }
};
},
methods: {
onToggle() {
this.show = !this.show;
},
}
};
</script>
<style lang="scss" scoped>
.demo-list{
width: 100%;
height: 100%;
background: #f9f9f9;
font-size: 12px;
overflow-y: auto;
}
.demo-list{
padding-top: 10px;
}
</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
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
# Prop
| 字段 | 说明 | 类型 | 默认值object |
|---|---|---|---|
| show | 是否显示Overlay蒙层 | boolean | false |
| z-index | 尺寸，可选值为：small base large | number | 1030 |
| lock-scroll | 是否禁止Overlay滚动 | boolean | false |
| duration | 蒙层动画显示时长 | number | 0.36 |
| custom-style | 自定义蒙层样式 | object | - |