Skip to content

Commit 7354344

Browse files
ExrickExrick
committed
feature: #152 
1 parent 832ffe8 commit 7354344

File tree

3 files changed

+160
-99
lines changed

3 files changed

+160
-99
lines changed

‎examples/routers/modal.vue

Lines changed: 112 additions & 97 deletions
Original file line numberDiff line numberDiff line change
@@ -1,106 +1,121 @@
1-
<template>
2-
<Button @click="instance('info')">Info</Button>
3-
<Button @click="instance('success')">Success</Button>
4-
<Button @click="instance('warning')">Warning</Button>
5-
<Button @click="instance('error')">Error</Button>
6-
<Divider></Divider>
7-
<Button @click="confirm">Normal</Button>
8-
<Button @click="custom">Custom button text</Button>
9-
<Button @click="async">Asynchronous closing</Button>
10-
<p>
11-
Name: {{ value }}
12-
</p>
13-
<p>
14-
<Button @click="handleRender">Custom content</Button>
15-
</p>
1+
<template>
2+
<Modal
3+
v-model="visible"
4+
v-model:fullscreen-value="fullscreen"
5+
showFullscreenIcon
6+
:closable="true"
7+
title="Common Modal dialog box title"
8+
>
9+
<p>Content of dialog</p>
10+
<p>Content of dialog</p>
11+
<p>Content of dialog</p>
12+
</Modal>
13+
<Button @click="instance('info')">Info</Button>
14+
<Button @click="instance('success')">Success</Button>
15+
<Button @click="instance('warning')">Warning</Button>
16+
<Button @click="instance('error')">Error</Button>
17+
<Divider></Divider>
18+
<Button @click="confirm">Normal</Button>
19+
<Button @click="custom">Custom button text</Button>
20+
<Button @click="async">Asynchronous closing</Button>
21+
<p>Name: {{ value }}</p>
22+
<p>
23+
<Button @click="handleRender">Custom content</Button>
24+
</p>
1625
</template>
1726
<script>
18-
import ViewUI from '../../src/index';
27+
import ViewUI from "../../src/index";
1928
export default {
20-
data () {
21-
return {
22-
value: ''
23-
}
29+
data() {
30+
return {
31+
visible: true,
32+
fullscreen: false,
33+
value: "",
34+
};
35+
},
36+
methods: {
37+
changeFull() {
38+
this.$Message.info(this.fullscreen + "");
2439
},
25-
methods: {
26-
instance (type) {
27-
const title = 'Title';
28-
const content = '<p>Content of dialog</p><p>Content of dialog</p>';
29-
switch (type) {
30-
case 'info':
31-
this.$Modal.info({
32-
title: title,
33-
content: content,
34-
onOk: () => {
35-
this.$Message.info('Clicked ok');
36-
},
37-
});
38-
break;
39-
case 'success':
40-
this.$Modal.success({
41-
title: title,
42-
content: content
43-
});
44-
break;
45-
case 'warning':
46-
this.$Modal.warning({
47-
title: title,
48-
content: content
49-
});
50-
break;
51-
case 'error':
52-
this.$Modal.error({
53-
title: title,
54-
content: content
55-
});
56-
break;
57-
}
40+
instance(type) {
41+
const title = "Title";
42+
const content = "<p>Content of dialog</p><p>Content of dialog</p>";
43+
switch (type) {
44+
case "info":
45+
this.$Modal.info({
46+
title: title,
47+
content: content,
48+
onOk: () => {
49+
this.$Message.info("Clicked ok");
50+
},
51+
});
52+
break;
53+
case "success":
54+
this.$Modal.success({
55+
title: title,
56+
content: content,
57+
});
58+
break;
59+
case "warning":
60+
this.$Modal.warning({
61+
title: title,
62+
content: content,
63+
});
64+
break;
65+
case "error":
66+
this.$Modal.error({
67+
title: title,
68+
content: content,
69+
});
70+
break;
71+
}
72+
},
73+
confirm() {
74+
this.$Modal.confirm({
75+
title: "Title",
76+
content: "<p>Content of dialog</p><p>Content of dialog</p>",
77+
onOk: () => {
78+
this.$Message.info("Clicked ok");
5879
},
59-
confirm () {
60-
this.$Modal.confirm({
61-
title: 'Title',
62-
content: '<p>Content of dialog</p><p>Content of dialog</p>',
63-
onOk: () => {
64-
this.$Message.info('Clicked ok');
65-
},
66-
onCancel: () => {
67-
this.$Message.info('Clicked cancel');
68-
}
69-
});
80+
onCancel: () => {
81+
this.$Message.info("Clicked cancel");
7082
},
71-
custom () {
72-
this.$Modal.confirm({
73-
title: 'Title',
74-
content: '<p>Content of dialog</p><p>Content of dialog</p>',
75-
okText: 'OK',
76-
cancelText: 'Cancel'
77-
});
83+
});
84+
},
85+
custom() {
86+
this.$Modal.confirm({
87+
title: "Title",
88+
content: "<p>Content of dialog</p><p>Content of dialog</p>",
89+
okText: "OK",
90+
cancelText: "Cancel",
91+
});
92+
},
93+
async() {
94+
this.$Modal.confirm({
95+
title: "Title",
96+
content: "<p>The dialog box will be closed after 2 seconds</p>",
97+
loading: true,
98+
onOk: () => {
99+
setTimeout(() => {
100+
this.$Modal.remove();
101+
this.$Message.info("Asynchronously close the dialog box");
102+
}, 2000);
78103
},
79-
async () {
80-
this.$Modal.confirm({
81-
title: 'Title',
82-
content: '<p>The dialog box will be closed after 2 seconds</p>',
83-
loading: true,
84-
onOk: () => {
85-
setTimeout(() => {
86-
this.$Modal.remove();
87-
this.$Message.info('Asynchronously close the dialog box');
88-
}, 2000);
89-
}
90-
});
104+
});
105+
},
106+
handleRender() {
107+
this.$Modal.confirm({
108+
render: (h) => {
109+
return h(ViewUI.Input, {
110+
// todo 不能直接写 'Input' ?
111+
modelValue: this.value,
112+
autofocus: true,
113+
placeholder: "Please enter your name...",
114+
"onUpdate:modelValue": (val) => (this.value = val),
115+
});
91116
},
92-
handleRender () {
93-
this.$Modal.confirm({
94-
render: (h) => {
95-
return h(ViewUI.Input, { // todo 不能直接写 'Input' ?
96-
modelValue: this.value,
97-
autofocus: true,
98-
placeholder: 'Please enter your name...',
99-
'onUpdate:modelValue': (val) => this.value = val
100-
})
101-
}
102-
})
103-
}
104-
}
105-
}
117+
});
118+
},
119+
},
120+
};
106121
</script>

‎src/components/modal/modal.vue

Lines changed: 34 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -7,6 +7,12 @@
77
<transition :name="transitionNames[0]" @after-leave="animationFinish">
88
<div v-bind="$attrs" :class="classes" :style="mainStyles" v-show="visible" @mousedown="handleMousedown">
99
<div :class="contentClasses" ref="content" :style="contentStyles" @click="handleClickModal">
10+
<a :class="[prefixCls + '-fullscreen-icon']" :style="fullscreenIconStyles"
11+
v-if="showFullscreenIcon" @click="handleFullscreen">
12+
<slot name="fullscreen">
13+
<Icon :type="fullscreen ? 'ios-contract' : 'ios-expand'"></Icon>
14+
</slot>
15+
</a>
1016
<a :class="[prefixCls + '-close']" v-if="closable" @click="close">
1117
<slot name="close">
1218
<Icon type="ios-close"></Icon>
@@ -59,7 +65,7 @@
5965
name: 'Modal',
6066
mixins: [ Locale, ScrollbarMixins ],
6167
components: { Icon, iButton },
62-
emits: ['on-cancel', 'on-ok', 'on-hidden', 'on-visible-change', 'update:modelValue'],
68+
emits: ['on-cancel', 'on-ok', 'on-hidden', 'on-visible-change', 'on-fullscreen', 'update:modelValue', 'update:fullscreenValue'],
6369
provide () {
6470
return {
6571
ModalInstance: this
@@ -129,7 +135,11 @@
129135
return !global.$VIEWUI || global.$VIEWUI.transfer === '' ? true : global.$VIEWUI.transfer;
130136
}
131137
},
132-
fullscreen: {
138+
fullscreenValue: {
139+
type: Boolean,
140+
default: false
141+
},
142+
showFullscreenIcon: {
133143
type: Boolean,
134144
default: false
135145
},
@@ -170,6 +180,7 @@
170180
showHead: true,
171181
buttonLoading: false,
172182
visible: this.modelValue,
183+
fullscreen: this.fullscreenValue,
173184
dragData: deepCopy(dragData),
174185
modalIndex: this.handleGetModalIndex(), // for Esc close the top modal
175186
isMouseTriggerIn: false, // #5800
@@ -253,6 +264,17 @@
253264
254265
return style;
255266
},
267+
fullscreenIconStyles () {
268+
let style = {};
269+
270+
const styleRight = {
271+
right: this.closable ? '44px' : '14px'
272+
};
273+
274+
Object.assign(style, styleRight);
275+
276+
return style;
277+
},
256278
localeOkText () {
257279
if (this.okText === undefined) {
258280
return this.t('i.modal.okText');
@@ -272,6 +294,11 @@
272294
}
273295
},
274296
methods: {
297+
handleFullscreen () {
298+
this.fullscreen = !this.fullscreen;
299+
this.$emit('update:fullscreenValue', this.fullscreen);
300+
this.$emit('on-fullscreen', this.fullscreen);
301+
},
275302
close () {
276303
if (!this.beforeClose) {
277304
return this.handleClose();
@@ -473,6 +500,11 @@
473500
this.dragData = deepCopy(dragData);
474501
}
475502
},
503+
fullscreenValue (val) {
504+
if (val === this.fullscreen) return;
505+
this.fullscreen = val;
506+
this.$emit('on-fullscreen', this.fullscreen);
507+
},
476508
loading (val) {
477509
if (!val) {
478510
this.buttonLoading = false;

‎src/styles/components/modal.less

Lines changed: 14 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -61,6 +61,20 @@
6161
.content-header;
6262
}
6363

64+
&-fullscreen-icon {
65+
z-index: 1;
66+
font-size: 18px;
67+
position: absolute;
68+
top: 10px;
69+
overflow: hidden;
70+
cursor: pointer;
71+
color: @legend-color;
72+
transition: color @transition-time ease;
73+
&:hover {
74+
color: #444;
75+
}
76+
}
77+
6478
&-close {
6579
z-index: 1;
6680
.content-close(1px, 31px);

0 commit comments

Comments
 (0)