Skip to content

Commit 75e1661

Browse files
tangjinzhoutangjinzhou
committed
feat: update modal
1 parent e2a7165 commit 75e1661

File tree

7 files changed

+157
-186
lines changed

7 files changed

+157
-186
lines changed

‎components/_util/PortalWrapper.js

+1
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,7 @@ export default {
2424
visible: PropTypes.bool,
2525
},
2626
data() {
27+
this._component = null;
2728
const { visible } = this.$props;
2829
openCount = visible ? openCount + 1 : openCount;
2930
return {};

‎components/modal/ConfirmDialog.jsx

+97-99
Original file line numberDiff line numberDiff line change
@@ -3,108 +3,106 @@ import Dialog from './Modal';
33
import ActionButton from './ActionButton';
44
import { getConfirmLocale } from './locale';
55

6-
export default {
7-
functional: true,
8-
render(h, context) {
9-
const { props } = context;
10-
const {
11-
icon,
12-
onCancel,
13-
onOk,
14-
close,
15-
zIndex,
16-
afterClose,
17-
visible,
18-
keyboard,
19-
centered,
20-
getContainer,
21-
maskStyle,
22-
okButtonProps,
23-
cancelButtonProps,
24-
closable = false,
25-
} = props;
26-
const okType = props.okType || 'primary';
27-
const prefixCls = props.prefixCls || 'ant-modal';
28-
const contentPrefixCls = `${prefixCls}-confirm`;
29-
// 默认为 true，保持向下兼容
30-
const okCancel = 'okCancel' in props ? props.okCancel : true;
31-
const width = props.width || 416;
32-
const style = props.style || {};
33-
const mask = props.mask === undefined ? true : props.mask;
34-
// 默认为 false，保持旧版默认行为
35-
const maskClosable = props.maskClosable === undefined ? false : props.maskClosable;
36-
const runtimeLocale = getConfirmLocale();
37-
const okText = props.okText || (okCancel ? runtimeLocale.okText : runtimeLocale.justOkText);
38-
const cancelText = props.cancelText || runtimeLocale.cancelText;
39-
const autoFocusButton = props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
40-
const transitionName = props.transitionName || 'zoom';
41-
const maskTransitionName = props.maskTransitionName || 'fade';
6+
const ConfirmDialog = (_, { attrs }) => {
7+
const {
8+
icon,
9+
onCancel,
10+
onOk,
11+
close,
12+
zIndex,
13+
afterClose,
14+
visible,
15+
keyboard,
16+
centered,
17+
getContainer,
18+
maskStyle,
19+
okButtonProps,
20+
cancelButtonProps,
21+
closable = false,
22+
} = attrs;
23+
const okType = attrs.okType || 'primary';
24+
const prefixCls = attrs.prefixCls || 'ant-modal';
25+
const contentPrefixCls = `${prefixCls}-confirm`;
26+
// 默认为 true，保持向下兼容
27+
const okCancel = 'okCancel' in attrs ? attrs.okCancel : true;
28+
const width = attrs.width || 416;
29+
const style = attrs.style || {};
30+
const mask = attrs.mask === undefined ? true : attrs.mask;
31+
// 默认为 false，保持旧版默认行为
32+
const maskClosable = attrs.maskClosable === undefined ? false : attrs.maskClosable;
33+
const runtimeLocale = getConfirmLocale();
34+
const okText = attrs.okText || (okCancel ? runtimeLocale.okText : runtimeLocale.justOkText);
35+
const cancelText = attrs.cancelText || runtimeLocale.cancelText;
36+
const autoFocusButton = attrs.autoFocusButton === null ? false : attrs.autoFocusButton || 'ok';
37+
const transitionName = attrs.transitionName || 'zoom';
38+
const maskTransitionName = attrs.maskTransitionName || 'fade';
4239

43-
const classString = classNames(
44-
contentPrefixCls,
45-
`${contentPrefixCls}-${props.type}`,
46-
`${prefixCls}-${props.type}`,
47-
props.class,
48-
);
40+
const classString = classNames(
41+
contentPrefixCls,
42+
`${contentPrefixCls}-${attrs.type}`,
43+
`${prefixCls}-${attrs.type}`,
44+
attrs.class,
45+
);
4946

50-
const cancelButton = okCancel && (
51-
<ActionButton
52-
actionFn={onCancel}
53-
closeModal={close}
54-
autoFocus={autoFocusButton === 'cancel'}
55-
buttonProps={cancelButtonProps}
56-
>
57-
{cancelText}
58-
</ActionButton>
59-
);
47+
const cancelButton = okCancel && (
48+
<ActionButton
49+
actionFn={onCancel}
50+
closeModal={close}
51+
autoFocus={autoFocusButton === 'cancel'}
52+
buttonProps={cancelButtonProps}
53+
>
54+
{cancelText}
55+
</ActionButton>
56+
);
6057

61-
return (
62-
<Dialog
63-
prefixCls={prefixCls}
64-
class={classString}
65-
wrapClassName={classNames({ [`${contentPrefixCls}-centered`]: !!centered })}
66-
onCancel={e => close({ triggerCancel: true }, e)}
67-
visible={visible}
68-
closable={closable}
69-
title=""
70-
transitionName={transitionName}
71-
footer=""
72-
maskTransitionName={maskTransitionName}
73-
mask={mask}
74-
maskClosable={maskClosable}
75-
maskStyle={maskStyle}
76-
style={style}
77-
width={width}
78-
zIndex={zIndex}
79-
afterClose={afterClose}
80-
keyboard={keyboard}
81-
centered={centered}
82-
getContainer={getContainer}
83-
>
84-
<div class={`${contentPrefixCls}-body-wrapper`}>
85-
<div class={`${contentPrefixCls}-body`}>
86-
{typeof icon === 'function' ? icon(h) : icon}
87-
{props.title === undefined ? null : (
88-
<span class={`${contentPrefixCls}-title`}>{props.title}</span>
89-
)}
90-
<div class={`${contentPrefixCls}-content`}>
91-
{typeof props.content === 'function' ? props.content(h) : props.content}
92-
</div>
93-
</div>
94-
<div class={`${contentPrefixCls}-btns`}>
95-
{cancelButton}
96-
<ActionButton
97-
type={okType}
98-
actionFn={onOk}
99-
closeModal={close}
100-
autoFocus={autoFocusButton === 'ok'}
101-
buttonProps={okButtonProps}
102-
>
103-
{okText}
104-
</ActionButton>
58+
return (
59+
<Dialog
60+
prefixCls={prefixCls}
61+
class={classString}
62+
wrapClassName={classNames({ [`${contentPrefixCls}-centered`]: !!centered })}
63+
onCancel={e => close({ triggerCancel: true }, e)}
64+
visible={visible}
65+
closable={closable}
66+
title=""
67+
transitionName={transitionName}
68+
footer=""
69+
maskTransitionName={maskTransitionName}
70+
mask={mask}
71+
maskClosable={maskClosable}
72+
maskStyle={maskStyle}
73+
style={style}
74+
width={width}
75+
zIndex={zIndex}
76+
afterClose={afterClose}
77+
keyboard={keyboard}
78+
centered={centered}
79+
getContainer={getContainer}
80+
>
81+
<div class={`${contentPrefixCls}-body-wrapper`}>
82+
<div class={`${contentPrefixCls}-body`}>
83+
{typeof icon === 'function' ? icon() : icon}
84+
{attrs.title === undefined ? null : (
85+
<span class={`${contentPrefixCls}-title`}>{attrs.title}</span>
86+
)}
87+
<div class={`${contentPrefixCls}-content`}>
88+
{typeof attrs.content === 'function' ? attrs.content() : attrs.content}
10589
</div>
10690
</div>
107-
</Dialog>
108-
);
109-
},
91+
<div class={`${contentPrefixCls}-btns`}>
92+
{cancelButton}
93+
<ActionButton
94+
type={okType}
95+
actionFn={onOk}
96+
closeModal={close}
97+
autoFocus={autoFocusButton === 'ok'}
98+
buttonProps={okButtonProps}
99+
>
100+
{okText}
101+
</ActionButton>
102+
</div>
103+
</div>
104+
</Dialog>
105+
);
110106
};
107+
ConfirmDialog.inheritAttrs = false;
108+
export default ConfirmDialog;

‎components/modal/Modal.jsx

+32-51
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,4 @@
1+
import { inject } from 'vue';
12
import classNames from 'classnames';
23
import Dialog from '../vc-dialog';
34
import PropTypes from '../_util/vue-types';
@@ -8,14 +9,7 @@ import Button from '../button';
89
import buttonTypes from '../button/buttonTypes';
910
const ButtonType = buttonTypes().type;
1011
import LocaleReceiver from '../locale-provider/LocaleReceiver';
11-
import {
12-
initDefaultProps,
13-
getComponentFromProp,
14-
getClass,
15-
getStyle,
16-
mergeProps,
17-
getListeners,
18-
} from '../_util/props-util';
12+
import { initDefaultProps, getComponent, getSlot } from '../_util/props-util';
1913
import { ConfigConsumerProps } from '../config-provider';
2014

2115
let mousePosition = null;
@@ -116,8 +110,10 @@ export default {
116110
this.sVisible = val;
117111
},
118112
},
119-
inject: {
120-
configProvider: { default: () => ConfigConsumerProps },
113+
setup() {
114+
return {
115+
configProvider: inject('configProvider', ConfigConsumerProps),
116+
};
121117
},
122118
// static info: ModalFunc;
123119
// static success: ModalFunc;
@@ -128,6 +124,7 @@ export default {
128124
methods: {
129125
handleCancel(e) {
130126
this.$emit('cancel', e);
127+
this.$emit('update:visible', false);
131128
this.$emit('change', false);
132129
},
133130

@@ -136,26 +133,19 @@ export default {
136133
},
137134
renderFooter(locale) {
138135
const { okType, confirmLoading } = this;
139-
const cancelBtnProps = mergeProps(
140-
{ on: { click: this.handleCancel } },
141-
this.cancelButtonProps || {},
142-
);
143-
const okBtnProps = mergeProps(
144-
{
145-
on: { click: this.handleOk },
146-
props: {
147-
type: okType,
148-
loading: confirmLoading,
149-
},
150-
},
151-
this.okButtonProps || {},
152-
);
136+
const cancelBtnProps = { onClick: this.handleCancel, ...(this.cancelButtonProps || {}) };
137+
const okBtnProps = {
138+
onClick: this.handleOk,
139+
type: okType,
140+
loading: confirmLoading,
141+
...(this.okButtonProps || {}),
142+
};
153143
return (
154144
<div>
155145
<Button {...cancelBtnProps}>
156-
{getComponentFromProp(this, 'cancelText') || locale.cancelText}
146+
{getComponent(this, 'cancelText') || locale.cancelText}
157147
</Button>
158-
<Button {...okBtnProps}>{getComponentFromProp(this, 'okText') || locale.okText}</Button>
148+
<Button {...okBtnProps}>{getComponent(this, 'okText') || locale.okText}</Button>
159149
</div>
160150
);
161151
},
@@ -168,48 +158,39 @@ export default {
168158
wrapClassName,
169159
centered,
170160
getContainer,
171-
$slots,
172-
$scopedSlots,
173161
$attrs,
174162
} = this;
175-
const children = $scopedSlots.default ? $scopedSlots.default() : $slots.default;
163+
const children = getSlot(this);
176164
const { getPrefixCls, getPopupContainer: getContextPopupContainer } = this.configProvider;
177165
const prefixCls = getPrefixCls('modal', customizePrefixCls);
178166

179167
const defaultFooter = (
180168
<LocaleReceiver
181169
componentName="Modal"
182170
defaultLocale={getConfirmLocale()}
183-
scopedSlots={{ default: this.renderFooter }}
171+
children={this.renderFooter}
184172
/>
185173
);
186-
const closeIcon = getComponentFromProp(this, 'closeIcon');
174+
const closeIcon = getComponent(this, 'closeIcon');
187175
const closeIconToRender = (
188176
<span class={`${prefixCls}-close-x`}>
189177
{closeIcon || <CloseOutlined class={`${prefixCls}-close-icon`} />}
190178
</span>
191179
);
192-
const footer = getComponentFromProp(this, 'footer');
193-
const title = getComponentFromProp(this, 'title');
180+
const footer = getComponent(this, 'footer');
181+
const title = getComponent(this, 'title');
194182
const dialogProps = {
195-
props: {
196-
...this.$props,
197-
getContainer: getContainer === undefined ? getContextPopupContainer : getContainer,
198-
prefixCls,
199-
wrapClassName: classNames({ [`${prefixCls}-centered`]: !!centered }, wrapClassName),
200-
title,
201-
footer: footer === undefined ? defaultFooter : footer,
202-
visible,
203-
mousePosition,
204-
closeIcon: closeIconToRender,
205-
},
206-
on: {
207-
...getListeners(this),
208-
close: this.handleCancel,
209-
},
210-
class: getClass(this),
211-
style: getStyle(this),
212-
attrs: $attrs,
183+
...this.$props,
184+
...$attrs,
185+
getContainer: getContainer === undefined ? getContextPopupContainer : getContainer,
186+
prefixCls,
187+
wrapClassName: classNames({ [`${prefixCls}-centered`]: !!centered }, wrapClassName),
188+
title,
189+
footer: footer === undefined ? defaultFooter : footer,
190+
visible,
191+
mousePosition,
192+
closeIcon: closeIconToRender,
193+
onClose: this.handleCancel,
213194
};
214195
return <Dialog {...dialogProps}>{children}</Dialog>;
215196
},

0 commit comments

Comments
 (0)