1 | <template>
|
2 | <transition
|
3 | name="dialog-fade"
|
4 | @after-enter="afterEnter"
|
5 | @after-leave="afterLeave">
|
6 | <div
|
7 | v-show="visible"
|
8 | class="el-dialog__wrapper"
|
9 | @click.self="handleWrapperClick">
|
10 | <div
|
11 | role="dialog"
|
12 | :key="key"
|
13 | aria-modal="true"
|
14 | :aria-label="title || 'dialog'"
|
15 | :class="['el-dialog', { 'is-fullscreen': fullscreen, 'el-dialog--center': center }, customClass]"
|
16 | ref="dialog"
|
17 | :style="style">
|
18 | <div class="el-dialog__header">
|
19 | <slot name="title">
|
20 | <span class="el-dialog__title">{{ title }}</span>
|
21 | </slot>
|
22 | <button
|
23 | type="button"
|
24 | class="el-dialog__headerbtn"
|
25 | aria-label="Close"
|
26 | v-if="showClose"
|
27 | @click="handleClose">
|
28 | <i class="el-dialog__close el-icon el-icon-close"></i>
|
29 | </button>
|
30 | </div>
|
31 | <div class="el-dialog__body" v-if="rendered"><slot></slot></div>
|
32 | <div class="el-dialog__footer" v-if="$slots.footer">
|
33 | <slot name="footer"></slot>
|
34 | </div>
|
35 | </div>
|
36 | </div>
|
37 | </transition>
|
38 | </template>
|
39 |
|
40 | <script>
|
41 | import Popup from 'element-ui/src/utils/popup';
|
42 | import Migrating from 'element-ui/src/mixins/migrating';
|
43 | import emitter from 'element-ui/src/mixins/emitter';
|
44 |
|
45 | export default {
|
46 | name: 'ElDialog',
|
47 |
|
48 | mixins: [Popup, emitter, Migrating],
|
49 |
|
50 | props: {
|
51 | title: {
|
52 | type: String,
|
53 | default: ''
|
54 | },
|
55 |
|
56 | modal: {
|
57 | type: Boolean,
|
58 | default: true
|
59 | },
|
60 |
|
61 | modalAppendToBody: {
|
62 | type: Boolean,
|
63 | default: true
|
64 | },
|
65 |
|
66 | appendToBody: {
|
67 | type: Boolean,
|
68 | default: false
|
69 | },
|
70 |
|
71 | lockScroll: {
|
72 | type: Boolean,
|
73 | default: true
|
74 | },
|
75 |
|
76 | closeOnClickModal: {
|
77 | type: Boolean,
|
78 | default: true
|
79 | },
|
80 |
|
81 | closeOnPressEscape: {
|
82 | type: Boolean,
|
83 | default: true
|
84 | },
|
85 |
|
86 | showClose: {
|
87 | type: Boolean,
|
88 | default: true
|
89 | },
|
90 |
|
91 | width: String,
|
92 |
|
93 | fullscreen: Boolean,
|
94 |
|
95 | customClass: {
|
96 | type: String,
|
97 | default: ''
|
98 | },
|
99 |
|
100 | top: {
|
101 | type: String,
|
102 | default: '15vh'
|
103 | },
|
104 | beforeClose: Function,
|
105 | center: {
|
106 | type: Boolean,
|
107 | default: false
|
108 | },
|
109 |
|
110 | destroyOnClose: Boolean
|
111 | },
|
112 |
|
113 | data() {
|
114 | return {
|
115 | closed: false,
|
116 | key: 0
|
117 | };
|
118 | },
|
119 |
|
120 | watch: {
|
121 | visible(val) {
|
122 | if (val) {
|
123 | this.closed = false;
|
124 | this.$emit('open');
|
125 | this.$el.addEventListener('scroll', this.updatePopper);
|
126 | this.$nextTick(() => {
|
127 | this.$refs.dialog.scrollTop = 0;
|
128 | });
|
129 | if (this.appendToBody) {
|
130 | document.body.appendChild(this.$el);
|
131 | }
|
132 | } else {
|
133 | this.$el.removeEventListener('scroll', this.updatePopper);
|
134 | if (!this.closed) this.$emit('close');
|
135 | if (this.destroyOnClose) {
|
136 | this.$nextTick(() => {
|
137 | this.key++;
|
138 | });
|
139 | }
|
140 | }
|
141 | }
|
142 | },
|
143 |
|
144 | computed: {
|
145 | style() {
|
146 | let style = {};
|
147 | if (!this.fullscreen) {
|
148 | style.marginTop = this.top;
|
149 | if (this.width) {
|
150 | style.width = this.width;
|
151 | }
|
152 | }
|
153 | return style;
|
154 | }
|
155 | },
|
156 |
|
157 | methods: {
|
158 | getMigratingConfig() {
|
159 | return {
|
160 | props: {
|
161 | 'size': 'size is removed.'
|
162 | }
|
163 | };
|
164 | },
|
165 | handleWrapperClick() {
|
166 | if (!this.closeOnClickModal) return;
|
167 | this.handleClose();
|
168 | },
|
169 | handleClose() {
|
170 | if (typeof this.beforeClose === 'function') {
|
171 | this.beforeClose(this.hide);
|
172 | } else {
|
173 | this.hide();
|
174 | }
|
175 | },
|
176 | hide(cancel) {
|
177 | if (cancel !== false) {
|
178 | this.$emit('update:visible', false);
|
179 | this.$emit('close');
|
180 | this.closed = true;
|
181 | }
|
182 | },
|
183 | updatePopper() {
|
184 | this.broadcast('ElSelectDropdown', 'updatePopper');
|
185 | this.broadcast('ElDropdownMenu', 'updatePopper');
|
186 | },
|
187 | afterEnter() {
|
188 | this.$emit('opened');
|
189 | },
|
190 | afterLeave() {
|
191 | this.$emit('closed');
|
192 | }
|
193 | },
|
194 |
|
195 | mounted() {
|
196 | if (this.visible) {
|
197 | this.rendered = true;
|
198 | this.open();
|
199 | if (this.appendToBody) {
|
200 | document.body.appendChild(this.$el);
|
201 | }
|
202 | }
|
203 | },
|
204 |
|
205 | destroyed() {
|
206 |
|
207 | if (this.appendToBody && this.$el && this.$el.parentNode) {
|
208 | this.$el.parentNode.removeChild(this.$el);
|
209 | }
|
210 | }
|
211 | };
|
212 | </script>
|