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
| <template>
| <view class="popup-root" v-if="isOpen" v-show="isShow" @click="clickMask">
| <view @click.stop>
| <slot></slot>
| </view>
| </view>
| </template>
|
| <script>
| type CloseCallBack = ()=> void;
| let closeCallBack:CloseCallBack = () :void => {};
| export default {
| emits:["close","clickMask"],
| data() {
| return {
| isShow:false,
| isOpen:false
| }
| },
| props: {
| maskClick: {
| type: Boolean,
| default: true
| },
| },
| watch: {
| // 设置show = true 时，如果没有 open 需要设置为 open
| isShow:{
| handler(isShow) {
| // console.log("isShow",isShow)
| if(isShow && this.isOpen == false){
| this.isOpen = true
| }
| },
| immediate:true
| },
| // 设置isOpen = true 时，如果没有 isShow 需要设置为 isShow
| isOpen:{
| handler(isOpen) {
| // console.log("isOpen",isOpen)
| if(isOpen && this.isShow == false){
| this.isShow = true
| }
| },
| immediate:true
| }
| },
| methods:{
| open(){
| // ...funs : CloseCallBack[]
| // if(funs.length > 0){
| // closeCallBack = funs[0]
| // }
| this.isOpen = true;
| },
| clickMask(){
| if(this.maskClick == true){
| this.$emit('clickMask')
| this.close()
| }
| },
| close(): void{
| this.isOpen = false;
| this.$emit('close')
| closeCallBack()
| },
| hiden(){
| this.isShow = false
| },
| show(){
| this.isShow = true
| }
| }
| }
| </script>
|
| <style>
| .popup-root {
| position: fixed;
| top: 0;
| left: 0;
| width: 750rpx;
| height: 100%;
| flex: 1;
| background-color: rgba(0, 0, 0, 0.3);
| justify-content: center;
| align-items: center;
| z-index: 99;
| }
| </style>
|
|
