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
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
| <template>
| <!--动画-->
| <transition name="el-fade-in">
| <el-dialog
| :close-on-press-escape="false"
| :modal="false"
| :modal-append-to-body="false"
| width="100%"
| :visible.sync="visible"
| custom-class="cus-dialog2"
| :show-close="false"
| center
| :destroy-on-close="true"
| @close="close"
| >
| <div slot="title">
| <div class="winTitle">
| <img src="@/assets/images/project/icon-return.png" alt="返回" @click="close" class="return-logo" />
| <span>{{ title }}</span>
| </div>
| </div>
| <div v-loading="loading" :style="{paddingBottom: $slots.footer?'80px !important':0}">
| <slot />
| </div>
| <div v-if="$slots.footer" slot="footer" class="dialog-footer">
| <slot name="footer" />
| </div>
| </el-dialog>
| </transition>
| </template>
|
| <script>
| export default {
| props: {
| loading: {
| type: Boolean,
| default: false,
| },
| title: {
| type: String,
| default: '',
| },
| },
| data() {
| return {
| visible: true,
| width: 0,
| top: 0,
| };
| },
| // watch:{
| // 'visible':{
| // deep:true,
| // immediate:true,
| // handle(val){
| // console.log(val)
| // }
| // }
| // },
| mounted() {
| this.show();
| },
| // watch:{
| // $router(){
| // this.close()
| // }
| // },
| methods: {
| show() {
| this.visible = true;
| try {
| window.onresize = function () {
| document.querySelectorAll('.cus-dialog2').forEach((v) => {
| v.style.width = '100%'
| v.style.top = '0'
| v.style.left = 0
| v.style.marginTop = 0
| });
| document.querySelectorAll('.el-dialog__wrapper').forEach((v) => {
| v.style.width = document.querySelector('.app-main').clientWidth + 'px';
| v.style.top = '120px';
| v.style.left = document.querySelector('.app-main').getBoundingClientRect().left + 'px';
| });
|
| };
| window.onresize();
| } catch (e) {
| console.error(e);
| }
| },
| close() {
| this.visible = false;
| this.$emit('close');
| },
| },
| };
| </script>
|
| <style scoped lang="scss">
| .winTitle {
| padding: 20px;
| display: flex;
| align-items: center;
| font-size: 18px;
| font-weight: 600;
| color:#666666;
| span {
| margin-left: 10px;
| }
| }
|
| >>> .cus-dialog2 > .el-dialog__footer {
| position: absolute;
| bottom: 0;
| left: 0;
| right: 0;
| padding: 0;
| background-color: #fff;
| }
|
| >>> .cus-dialog2 > .el-dialog__header {
| border: none;
| padding: 0 !important;
| }
|
| >>> .cus-dialog2 {
| margin: 0 !important;
| }
|
| >>> .cus-dialog2 > .el-dialog__body {
| height: calc(100vh - 190px);
| overflow-y: auto;
| overflow-x: hidden;
| padding: 0 !important;
|
| &::-webkit-scrollbar {
| width: 0;
| }
|
| //滚动条轨道
| &::-webkit-scrollbar-track {
| width: 0;
| }
| }
|
| .return-logo {
| width: 24px;
| height: 24px;
| cursor: pointer;
| }
| </style>
|
|
