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
72
73
74
75
76
| <template>
| <view class="use-mask pos-f pos-full overflow-hidden" :class="[show ? 'use-mask-show' : '']" :style="[maskStyle]" @touchmove.stop.prevent @tap="click" @contextmenu.prevent>
| <slot />
| </view>
| </template>
|
| <script>
| export default {
| props: {
| // 是否显示遮罩
| show: {
| type: Boolean,
| default: false
| },
| // 层级z-index
| zIndex: {
| type: [Number, String],
| default: '10000'
| },
| // 遮罩的动画样式， 是否使用使用zoom进行scale进行缩放
| zoom: {
| type: Boolean,
| default: true
| },
| // 遮罩的过渡时间，单位为ms
| duration: {
| type: [Number, String],
| default: 300
| },
| // 是否可以通过点击遮罩进行关闭
| maskClickAble: {
| type: Boolean,
| default: true
| }
| },
| computed: {
| maskStyle() {
| let style = {
| transition: `all ${this.duration / 1000}s ease-in-out`,
| zIndex: this.zIndex,
| };
| if (this.show) {
| style.zIndex = this.zIndex;
| } else {
| style.zIndex = -1;
| }
| // 缩放
| if (this.zoom) {
| style.transform = 'scale(1.2, 1.2)';
| }
|
| return style;
| }
| },
| methods: {
| click() {
| if (this.maskClickAble) {
| this.$emit('click');
| }
| }
| }
| }
| </script>
|
| <style lang="scss">
| .use-mask {
| opacity: 0;
| background-color: rgba(0, 0, 0, 0.6);
| }
|
| .use-mask-show {
| opacity: 1;
| visibility: visible;
| transform: scale(1);
| }
| </style>
|
|
