PopUp.vue
2.19 KB
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
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
<template>
<transition name="picker-fade">
<div class="popUp" v-show="state" @touchmove.prevent @click="hide">
<div class="picker-panel" v-show="state" @click.stop>
<div class="picker-content">
<slot name="content"></slot>
<div @click="hide">取 消</div>
</div>
</div>
<div id="FuckIphoneX"></div>
</div>
</transition>
</template>
<script>
export default {
name: 'PopUp',
data: () => ({
state: false,
}),
props: {
display: {
type: Boolean,
default: false
}
},
watch: {
display: function (val, oldVal) {
if (val) {
this.state = true
} else {
this.state = false
}
},
state: function (val, oldVal) {
if (!val) {
this.$emit('pickerClose')
}
},
},
methods: {
hide() {
this.state = false
this.$emit('close')
},
},
}
</script>
<style scoped lang="stylus" rel="stylesheet/stylus">
@import "~assets/css/mixin.styl"
@import "~assets/css/variable.styl"
.popUp
position: fixed
left: 0
top: 0
z-index: 100
width: 100%
height: 100%
overflow: hidden
text-align: center
font-size: 1rem
color: #000
background-color: $color-mask-bgc
&.picker-fade-enter, &.picker-fade-leave-active
opacity: 0
&.picker-fade-enter-active, &.picker-fade-leave-active
transition: all .3s ease-in-out
.picker-panel
position: absolute
z-index: 600
bottom: 0
width: 100%
min-height: 3.5rem
background: $color-white
&.picker-move-enter, &.picker-move-leave-active
transform: translate3d(0, 273px, 0)
&.picker-move-enter-active, &.picker-move-leave-active
transition: all .3s ease-in-out
.picker-content
margin-bottom: constant(safe-area-inset-bottom);
margin-bottom: env(safe-area-inset-bottom);
div
width: 100%
height: 3.5rem
line-height: 3.5rem
font-size: 1.2rem
#FuckIphoneX
position: fixed;
bottom: 0;
width: 100%;
height: constant(safe-area-inset-bottom);
height: env(safe-area-inset-bottom);
background-color: #fff;
</style>