github
/
ant-design-vue
mirror of https://github.com/vueComponent/ant-design-vue
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

feat: update modal

pull/802/head
wangxueliang 2019-04-17 10:21:28 +08:00
parent a8424d271f
commit 103293aa8f
10 changed files with 149 additions and 19 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
components/index.js
View File

@ -203,6 +203,7 @@ const install = function(Vue) {
Vue.prototype.$error = Modal.error;
Vue.prototype.$warning = Modal.warning;
Vue.prototype.$confirm = Modal.confirm;
Vue.prototype.$destroyAll = Modal.destroyAll;
};
/* istanbul ignore if */

20
components/modal/ConfirmDialog.jsx
View File

@ -3,6 +3,8 @@ import Icon from '../icon';
import Dialog from './Modal';
import ActionButton from './ActionButton';
import { getConfirmLocale } from './locale';
import { hasProp } from '../_util/props-util';
import warning from '../_util/warning';
export default {
functional: true,
@ -21,8 +23,13 @@ export default {
maskStyle,
okButtonProps,
cancelButtonProps,
iconType = 'question-circle',
} = props;
const iconType = props.iconType || 'question-circle';
warning(
!('iconType' in props),
`The property 'iconType' is deprecated. Use the property 'icon' instead.`,
);
const icon = props.icon ? props.icon : iconType;
const okType = props.okType || 'primary';
const prefixCls = props.prefixCls || 'ant-modal';
const contentPrefixCls = `${prefixCls}-confirm`;
@ -30,12 +37,15 @@ export default {
const okCancel = 'okCancel' in props ? props.okCancel : true;
const width = props.width || 416;
const style = props.style || {};
const mask = props.mask === undefined ? true : props.mask;
// 默认为 false，保持旧版默认行为
const maskClosable = props.maskClosable === undefined ? false : props.maskClosable;
const runtimeLocale = getConfirmLocale();
const okText = props.okText || (okCancel ? runtimeLocale.okText : runtimeLocale.justOkText);
const cancelText = props.cancelText || runtimeLocale.cancelText;
const autoFocusButton = props.autoFocusButton === null ? false : props.autoFocusButton || 'ok';
const transitionName = props.transitionName || 'zoom';
const maskTransitionName = props.maskTransitionName || 'fade';
const classString = classNames(
contentPrefixCls,
@ -54,6 +64,7 @@ export default {
{cancelText}
</ActionButton>
);
const iconNode = typeof icon === 'string' ? <Icon type={icon} /> : icon;
return (
<Dialog
@ -63,9 +74,10 @@ export default {
onCancel={e => close({ triggerCancel: true }, e)}
visible={visible}
title=""
transitionName="zoom"
transitionName={transitionName}
footer=""
maskTransitionName="fade"
maskTransitionName={maskTransitionName}
mask={mask}
maskClosable={maskClosable}
maskStyle={maskStyle}
style={style}
@ -78,7 +90,7 @@ export default {
>
<div class={`${contentPrefixCls}-body-wrapper`}>
<div class={`${contentPrefixCls}-body`}>
<Icon type={iconType} />
{iconNode}
<span class={`${contentPrefixCls}-title`}>{props.title}</span>
<div class={`${contentPrefixCls}-content`}>{props.content}</div>
</div>

30
components/modal/Modal.jsx
View File

@ -2,11 +2,12 @@ import classNames from 'classnames';
import Dialog from '../vc-dialog';
import PropTypes from '../_util/vue-types';
import addEventListener from '../_util/Dom/addEventListener';
import { getConfirmLocale } from './locale';
import Icon from '../icon';
import Button from '../button';
import buttonTypes from '../button/buttonTypes';
const ButtonType = buttonTypes().type;
import LocaleReceiver from '../locale-provider/LocaleReceiver';
import { getConfirmLocale } from './locale';
import {
initDefaultProps,
getComponentFromProp,
@ -14,7 +15,7 @@ import {
getStyle,
mergeProps,
} from '../_util/props-util';
import Icon from '../icon';
import { ConfigConsumerProps } from '../config-provider';
let mousePosition = null;
let mousePositionEventBinded = false;
@ -42,13 +43,16 @@ const modalProps = (defaultProps = {}) => {
/** 底部内容*/
footer: PropTypes.any,
/** 确认按钮文字*/
okText: PropTypes.string,
okText: PropTypes.any,
/** 确认按钮类型*/
okType: ButtonType,
/** 取消按钮文字*/
cancelText: PropTypes.string,
cancelText: PropTypes.any,
icon: PropTypes.any,
/** 点击蒙层是否允许关闭*/
maskClosable: PropTypes.bool,
/** 强制渲染 Modal*/
forceRender: PropTypes.bool,
okButtonProps: PropTypes.object,
cancelButtonProps: PropTypes.object,
destroyOnClose: PropTypes.bool,
@ -66,6 +70,8 @@ const modalProps = (defaultProps = {}) => {
return initDefaultProps(props, defaultProps);
};
export const destroyFns = [];
export default {
name: 'AModal',
model: {
@ -73,7 +79,6 @@ export default {
event: 'change',
},
props: modalProps({
prefixCls: 'ant-modal',
width: 520,
transitionName: 'zoom',
maskTransitionName: 'fade',
@ -83,6 +88,9 @@ export default {
// okButtonDisabled: false,
// cancelButtonDisabled: false,
}),
inject: {
configProvider: { default: () => ({}) },
},
mounted() {
if (mousePositionEventBinded) {
return;
@ -145,7 +153,17 @@ export default {
},
render() {
const { visible, wrapClassName, centered, prefixCls, $listeners, $slots } = this;
const {
prefixCls: customizePrefixCls,
visible,
wrapClassName,
centered,
$listeners,
$slots,
} = this;
const getPrefixCls = this.configProvider.getPrefixCls || ConfigConsumerProps.getPrefixCls;
const prefixCls = getPrefixCls('modal', customizePrefixCls);
const defaultFooter = (
<LocaleReceiver

10
components/modal/confirm.js
View File

@ -1,5 +1,6 @@
import Vue from 'vue';
import ConfirmDialog from './ConfirmDialog';
import { destroyFns } from './Modal';
export default function confirm(config) {
const div = document.createElement('div');
@ -30,6 +31,13 @@ export default function confirm(config) {
if (config.onCancel && triggerCancel) {
config.onCancel(...args);
}
for (let i = 0; i < destroyFns.length; i++) {
const fn = destroyFns[i];
if (fn === close) {
destroyFns.splice(i, 1);
break;
}
}
}
function render(props) {
@ -48,7 +56,7 @@ export default function confirm(config) {
}
confirmDialogInstance = render(currentConfig);
destroyFns.push(close);
return {
destroy: close,
update,

48
components/modal/demo/confirm-router.md Normal file
View File

@ -0,0 +1,48 @@
<cn>
#### 销毁确认对话框
使用 `Modal.destroyAll()` 可以销毁弹出的确认窗。通常用于路由监听当中，处理路由前进、后退不能销毁确认对话框的问题。
</cn>
<us>
#### destroy confirmation modal dialog
`Modal.destroyAll()` could destroy all confirmation modal dialogs. Usually, you can use it in router change event to destroy confirm modal dialog automatically
</us>
```html
<template>
<a-button @click="showConfirm">
Confirm
</a-button>
</template>
<script>
import Button from '../../button'
export default {
methods: {
showConfirm() {
for (let i = 0; i < 3; i += 1) {
setTimeout(() => {
this.$confirm({
content: ( // JSX support
<Button onClick={this.destroyAll}>
Click to destroy all
</Button>
),
onOk() {
return new Promise((resolve, reject) => {
setTimeout(Math.random() > 0.5 ? resolve : reject, 1000);
}).catch(() => console.log('Oops errors!'));
},
onCancel() {},
});
}, i * 500);
}
},
destroyAll() {
this.$destroyAll();
}
}
}
</script>
```

4
components/modal/demo/index.vue
View File

@ -9,6 +9,7 @@ import Locale from './locale';
import Manual from './manual';
import Position from './position';
import ButtonProps from './button-props';
import ConfirmRouter from './confirm-router';
import CN from '../index.zh-CN.md';
import US from '../index.en-US.md';
@ -17,7 +18,7 @@ const md = {
模态对话框。
## 何时使用
需要用户处理事务，又不希望跳转页面以致打断工作流程时，可以使用 \`Modal\` 在当前页面正中打开一个浮层，承载相应的操作。
另外当需要一个简洁的确认框询问用户时，可以使用精心封装好的 \`antd.Modal.confirm()\` 等方法。
另外当需要一个简洁的确认框询问用户时，可以使用 \`Modal.confirm()\` 等语法糖方法。
## 代码演示`,
us: `# Modal
Modal dialogs.
@ -49,6 +50,7 @@ export default {
<Manual/>
<Position/>
<ButtonProps />
<ConfirmRouter />
<api>
<CN slot='cn' />
<US/>

18
components/modal/index.en-US.md
View File

@ -11,6 +11,7 @@
| confirmLoading | Whether to apply loading visual effect for OK button or not | boolean | false |
| destroyOnClose | Whether to unmount child components on onClose | boolean | false |
| footer | Footer content, set as `:footer="null"` when you don't need default buttons | string\|slot | OK and Cancel buttons |
| forceRender | Force render Modal | boolean | false |
| getContainer | Return the mount node for Modal | (instance): HTMLElement | () => document.body |
| mask | Whether show mask or not. | Boolean | true |
| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | boolean | true |
@ -55,8 +56,10 @@ The properties of the object are follows:
| centered | Centered Modal | Boolean | `false` |
| class | class of container | string | - |
| content | Content | string\|vNode | - |
| iconType | Icon `type` of the Icon component | string | `question-circle` |
| icon | custom icon (`Added in 1.40.0`) | string\|slot | `<Icon type="question-circle">` |
| iconType | Icon `type` of the Icon component (deperated after `1.40.0`) | string | `question-circle` |
| keyboard | Whether support press esc to close | Boolean | true |
| mask | Whether show mask or not. | Boolean | true |
| maskClosable | Whether to close the modal dialog when the mask (area outside the modal) is clicked | Boolean | `false` |
| okText | Text of the OK button | string | `OK` |
| okType | Button `type` of the OK button | string | `primary` |
@ -80,3 +83,16 @@ modal.update({
modal.destroy();
```
- `Modal.destroyAll`
`Modal.destroyAll()` could destroy all confirmation modal dialogs(Modal.info/Modal.success/Modal.error/Modal.warning/Modal.confirm). Usually, you can use it in router change event to destroy confirm modal dialog automatically without use modal reference to close( it's too complex to use for all modal dialogs)
```jsx
const router = new VueRouter({ ... })
// router change
router.beforeEach((to, from, next) => {
Modal.destroyAll();
})
```

19
components/modal/index.js
View File

@ -1,4 +1,4 @@
import Modal from './Modal';
import Modal, { destroyFns } from './Modal';
import modalConfirm from './confirm';
// export { ActionButtonProps } from './ActionButton'
@ -7,7 +7,7 @@ import modalConfirm from './confirm';
const info = function(props) {
const config = {
type: 'info',
iconType: 'info-circle',
icon: <Icon type="info-circle" />,
okCancel: false,
...props,
};
@ -17,7 +17,7 @@ const info = function(props) {
const success = function(props) {
const config = {
type: 'success',
iconType: 'check-circle',
icon: <Icon type="check-circle" />,
okCancel: false,
...props,
};
@ -27,7 +27,7 @@ const success = function(props) {
const error = function(props) {
const config = {
type: 'error',
iconType: 'close-circle',
icon: <Icon type="close-circle" />,
okCancel: false,
...props,
};
@ -37,7 +37,7 @@ const error = function(props) {
const warning = function(props) {
const config = {
type: 'warning',
iconType: 'exclamation-circle',
icon: <Icon type="exclamation-circle" />,
okCancel: false,
...props,
};
@ -60,6 +60,15 @@ Modal.warning = warning;
Modal.warn = warn;
Modal.confirm = confirm;
Modal.destroyAll = function() {
while (destroyFns.length) {
const close = destroyFns.pop();
if (close) {
close();
}
}
};
/* istanbul ignore next */
Modal.install = function(Vue) {
Vue.component(Modal.name, Modal);

17
components/modal/index.zh-CN.md
View File

@ -10,6 +10,7 @@
| confirmLoading | 确定按钮 loading | boolean | 无 |
| destroyOnClose | 关闭时销毁 Modal 里的子元素 | boolean | false |
| footer | 底部内容，当不需要默认底部按钮时，可以设为 `:footer="null"` | string\|slot | 确定取消按钮 |
| forceRender | 强制渲染 Modal | boolean | false |
| getContainer | 指定 Modal 挂载的 HTML 节点 | (instance): HTMLElement | () => document.body |
| keyboard | 是否支持键盘esc关闭 | boolean | true |
| mask | 是否展示遮罩 | Boolean | true |
@ -54,7 +55,9 @@
| centered | 垂直居中展示 Modal | Boolean | `false` |
| class | 容器类名 | string | - |
| content | 内容 | string\|vNode | 无 |
| iconType | 图标 Icon 类型 | string | question-circle |
| icon | 自定义图标（1.40.0 新增） | string\|slot | `<Icon type="question-circle">` |
| iconType | 图标类型（1.40.0 后废弃，请使用 `icon`） | string | `question-circle` |
| mask | 是否展示遮罩 | Boolean | true |
| maskClosable | 点击蒙层是否允许关闭 | Boolean | `false` |
| keyboard | 是否支持键盘esc关闭 | boolean | true |
| okText | 确认按钮文字 | string | 确定 |
@ -79,3 +82,15 @@ modal.update({
modal.destroy();
```
- `Modal.destroyAll`
使用 `Modal.destroyAll()` 可以销毁弹出的确认窗（即上述的 Modal.info、Modal.success、Modal.error、Modal.warning、Modal.confirm）。通常用于路由监听当中，处理路由前进、后退不能销毁确认对话框的问题，而不用各处去使用实例的返回值进行关闭（modal.destroy() 适用于主动关闭，而不是路由这样被动关闭）
```jsx
const router = new VueRouter({ ... })
// router change
router.beforeEach((to, from, next) => {
Modal.destroyAll();
})
```

1
site/components.js
View File

@ -68,6 +68,7 @@ Vue.prototype.$success = Modal.success;
Vue.prototype.$error = Modal.error;
Vue.prototype.$warning = Modal.warning;
Vue.prototype.$confirm = Modal.confirm;
Vue.prototype.$destroyAll = Modal.destroyAll;
/* v1.1.3+ registration methods */
Vue.use(Affix);