From fab5c432ca5096748c7ffbee9e3f1209996c6ac5 Mon Sep 17 00:00:00 2001 From: tjz <415800467@qq.com> Date: Tue, 6 Mar 2018 22:53:32 +0800 Subject: [PATCH] add modal confirm --- components/_util/props-util.js | 9 +++-- components/index.js | 25 +++++++++---- components/modal/ConfirmDialog.vue | 6 ++-- components/modal/Modal.vue | 10 ++++-- components/modal/demo/confirm.md | 58 ++++++++++++++++++++++++++++++ components/modal/index.js | 32 +++++++++++------ components/vc-dialog/Dialog.vue | 13 ++++--- 7 files changed, 120 insertions(+), 33 deletions(-) create mode 100644 components/modal/demo/confirm.md diff --git a/components/_util/props-util.js b/components/_util/props-util.js index d44419859..ea74b6b4f 100644 --- a/components/_util/props-util.js +++ b/components/_util/props-util.js @@ -111,9 +111,12 @@ export function getClass (ele) { } else if (ele.$vnode && ele.$vnode.data) { data = ele.$vnode.data } - let cls = data.class || data.staticClass || {} - if (typeof cls === 'string') { - cls = cls.split(' ').forEach(c => { cls[c.trim()] = true }) + const tempCls = data.class || data.staticClass + let cls = {} + if (typeof tempCls === 'string') { + tempCls.split(' ').forEach(c => { cls[c.trim()] = true }) + } else { + cls = tempCls } return cls } diff --git a/components/index.js b/components/index.js index c04262eb5..04b0ca7b7 100644 --- a/components/index.js +++ b/components/index.js @@ -72,12 +72,6 @@ import message from './message' export { default as Spin } from './spin' -const api = { - notification, - message, -} -export { api } - import Select from './select' const SelectOption = Select.Option const SelectOptGroup = Select.OptGroup @@ -94,4 +88,23 @@ export { default as Affix } from './affix' export { default as Cascader } from './cascader' export { default as BackTop } from './back-top' export { default as Modal } from './modal' +import { + info, + success, + error, + warning, + warn, + confirm, +} from './modal' +const api = { + notification, + message, + modalInfo: info, + modalSuccess: success, + modalError: error, + modalWarning: warning, + modalWarn: warn, + modalConfirm: confirm, +} +export { api } diff --git a/components/modal/ConfirmDialog.vue b/components/modal/ConfirmDialog.vue index 5528e7f22..bec01ce92 100644 --- a/components/modal/ConfirmDialog.vue +++ b/components/modal/ConfirmDialog.vue @@ -7,9 +7,9 @@ import { getConfirmLocale } from './locale' export default { functional: true, - render () { - const { onCancel, onOk, close, zIndex, afterClose, visible } = this.$props - const props = this.$props + render (h, context) { + const { data: props } = context + const { onCancel, onOk, close, zIndex, afterClose, visible } = props const iconType = props.iconType || 'question-circle' const okType = props.okType || 'primary' const prefixCls = props.prefixCls || 'ant-confirm' diff --git a/components/modal/Modal.vue b/components/modal/Modal.vue index d437232f3..81ff819d2 100644 --- a/components/modal/Modal.vue +++ b/components/modal/Modal.vue @@ -7,7 +7,7 @@ import buttonTypes from '../button/buttonTypes' const ButtonType = buttonTypes().type import LocaleReceiver from '../locale-provider/LocaleReceiver' import { getConfirmLocale } from './locale' -import { initDefaultProps, getComponentFromProp } from '../_util/props-util' +import { initDefaultProps, getComponentFromProp, getClass, getStyle } from '../_util/props-util' let mousePosition = null let mousePositionEventBinded = false @@ -125,11 +125,13 @@ export default { children={this.renderFooter} /> ) + const footer = getComponentFromProp(this, 'footer') + const title = getComponentFromProp(this, 'title') const dialogProps = { props: { ...this.$props, - title: getComponentFromProp(this, 'title'), - footer: getComponentFromProp(this, 'footer') || defaultFooter, + title, + footer: typeof footer === undefined ? defaultFooter : footer, visible: visible, mousePosition, }, @@ -137,6 +139,8 @@ export default { ...$listeners, close: this.handleCancel, }, + class: getClass(this), + style: getStyle(this), } return ( diff --git a/components/modal/demo/confirm.md b/components/modal/demo/confirm.md new file mode 100644 index 000000000..b5db87850 --- /dev/null +++ b/components/modal/demo/confirm.md @@ -0,0 +1,58 @@ + + +#### 确认对话框 +使用 `confirm()` 可以快捷地弹出确认框。 + + + +#### Confirmation modal dialog +To use `confirm()` to popup a confirmation modal dialog. + + +```html + + +``` + diff --git a/components/modal/index.js b/components/modal/index.js index 146ec0bef..032891f54 100644 --- a/components/modal/index.js +++ b/components/modal/index.js @@ -1,56 +1,66 @@ import Modal from './Modal' -import confirm from './confirm' +import modalConfirm from './confirm' // export { ActionButtonProps } from './ActionButton' // export { ModalProps, ModalFuncProps } from './Modal' -Modal.info = function (props) { +const info = function (props) { const config = { type: 'info', iconType: 'info-circle', okCancel: false, ...props, } - return confirm(config) + return modalConfirm(config) } -Modal.success = function (props) { +const success = function (props) { const config = { type: 'success', iconType: 'check-circle', okCancel: false, ...props, } - return confirm(config) + return modalConfirm(config) } -Modal.error = function (props) { +const error = function (props) { const config = { type: 'error', iconType: 'cross-circle', okCancel: false, ...props, } - return confirm(config) + return modalConfirm(config) } -Modal.warning = Modal.warn = function (props) { +const warning = function (props) { const config = { type: 'warning', iconType: 'exclamation-circle', okCancel: false, ...props, } - return confirm(config) + return modalConfirm(config) } +const warn = warning -Modal.confirm = function (props) { +const confirm = function (props) { const config = { type: 'confirm', okCancel: true, ...props, } - return confirm(config) + return modalConfirm(config) +} + +export { + info, + success, + error, + warning, + warn, + confirm, } export default Modal diff --git a/components/vc-dialog/Dialog.vue b/components/vc-dialog/Dialog.vue index 36a4bd300..c2b081775 100644 --- a/components/vc-dialog/Dialog.vue +++ b/components/vc-dialog/Dialog.vue @@ -11,7 +11,7 @@ let uuid = 0 let openCount = 0 /* eslint react/no-is-mounted:0 */ - +function noop () {} function getScroll (w, top) { let ret = w[`page${top ? 'Y' : 'X'}Offset`] const method = `scroll${top ? 'Top' : 'Left'}` @@ -90,12 +90,12 @@ export default { watch: { visible (val) { - this.$nextTick(() => { - this.updatedCallback(val) - }) if (val) { this.destroyPopup = false } + this.$nextTick(() => { + this.updatedCallback(!val) + }) }, }, beforeDestroy () { @@ -160,7 +160,6 @@ export default { } }, onKeydown (e) { - console.log('keydown') const props = this.$props if (props.keyboard && e.keyCode === KeyCode.ESC) { this.close(e) @@ -216,7 +215,7 @@ export default { closer = (