a2702f6d
 刘淇
巡查计划
|
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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<template>
<u-transition
:show="show"
custom-class="u-overlay"
:duration="duration"
:custom-style="overlayStyle"
@click="clickHandler"
@touchmove.stop.prevent="noop"
>
<slot />
</u-transition>
</template>
<script>
import { props } from './props';
import { mpMixin } from '../../libs/mixin/mpMixin';
import { mixin } from '../../libs/mixin/mixin';
import { addStyle, deepMerge } from '../../libs/function/index';
/**
* overlay 遮罩
* @description 创建一个遮罩层，用于强调特定的页面元素，并阻止用户对遮罩下层的内容进行操作，一般用于弹窗场景
* @tutorial https://uview-plus.jiangruyi.com/components/overlay.html
* @property {Boolean} show 是否显示遮罩（默认 false ）
* @property {String | Number} zIndex zIndex 层级（默认 10070 ）
* @property {String | Number} duration 动画时长，单位毫秒（默认 300 ）
* @property {String | Number} opacity 不透明度值，当做rgba的第四个参数 （默认 0.5 ）
* @property {Object} customStyle 定义需要用到的外部样式
* @event {Function} click 点击遮罩发送事件
* @example <u-overlay :show="show" @click="show = false"></u-overlay>
*/
export default {
name: "u-overlay",
mixins: [mpMixin, mixin,props],
computed: {
overlayStyle() {
const style = {
position: 'fixed',
top: 0,
left: 0,
right: 0,
zIndex: this.zIndex,
bottom: 0,
'background-color': `rgba(0, 0, 0, ${this.opacity})`
}
return deepMerge(style, addStyle(this.customStyle))
}
},
emits: ["click"],
methods: {
clickHandler() {
this.$emit('click')
}
}
}
</script>
<style lang="scss" scoped>
$u-overlay-top:0 !default;
$u-overlay-left:0 !default;
$u-overlay-width:100% !default;
$u-overlay-height:100% !default;
$u-overlay-background-color:rgba(0, 0, 0, .7) !default;
.u-overlay {
position: fixed;
top:$u-overlay-top;
left:$u-overlay-left;
width: $u-overlay-width;
height:$u-overlay-height;
background-color:$u-overlay-background-color;
}
</style>
|
