From c571d9ec2bb39957e811dff3d014c44a821728e0 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E6=A2=81=E7=81=8F?= Date: Tue, 15 Nov 2016 09:42:02 +0800 Subject: [PATCH] add a dialog to fixed $Modal can not use temporarily add a dialog to fixed $Modal can not use temporarily --- src/components/dialog/confirm.js | 169 ++++++++++++++++++++++++ src/components/dialog/dialog.vue | 210 ++++++++++++++++++++++++++++++ src/components/dialog/index.js | 60 +++++++++ src/index.js | 3 +- src/styles/components/select.less | 2 +- test/main.js | 2 + test/routers/message.vue | 148 +++++---------------- test/routers/slider.vue | 22 ++-- 8 files changed, 489 insertions(+), 127 deletions(-) create mode 100644 src/components/dialog/confirm.js create mode 100644 src/components/dialog/dialog.vue create mode 100644 src/components/dialog/index.js diff --git a/src/components/dialog/confirm.js b/src/components/dialog/confirm.js new file mode 100644 index 00000000..05b2e636 --- /dev/null +++ b/src/components/dialog/confirm.js @@ -0,0 +1,169 @@ +import Vue from 'vue'; +import Modal from './dialog.vue'; +import Icon from '../icon/icon.vue'; +import iButton from '../button/button.vue'; +import { camelcaseToHyphen } from '../../utils/assist'; + +const prefixCls = 'ivu-modal-confirm'; + +Modal.newInstance = properties => { + const _props = properties || {}; + + let props = ''; + Object.keys(_props).forEach(prop => { + props += ' :' + camelcaseToHyphen(prop) + '=' + prop; + }); + + const div = document.createElement('div'); + div.innerHTML = ` + +
+
+
+
{{{ title }}}
+
+
+ {{{ body }}} +
+
+ {{ cancelText }} + {{ okText }} +
+
+ + `; + document.body.appendChild(div); + + const modal = new Vue({ + el: div, + components: { Modal, iButton, Icon }, + data: Object.assign(_props, { + visible: false, + width: 416, + title: '', + body: '', + iconType: '', + iconName: '', + okText: '确定', + cancelText: '取消', + showCancel: false, + loading: false, + buttonLoading: false + }), + computed: { + iconTypeCls () { + return [ + `${prefixCls}-head-icon`, + `${prefixCls}-head-icon-${this.iconType}` + ] + }, + iconNameCls () { + return [ + 'ivu-icon', + `ivu-icon-${this.iconName}` + ] + } + }, + methods: { + cancel () { + this.visible = false; + this.buttonLoading = false; + this.onCancel(); + this.remove(); + }, + ok () { + if (this.loading) { + this.buttonLoading = true; + } else { + this.visible = false; + this.remove(); + } + this.onOk(); + }, + remove () { + setTimeout(() => { + this.destroy(); + }, 300); + }, + destroy () { + this.$destroy(); + document.body.removeChild(div); + this.onRemove(); + }, + onOk () {}, + onCancel () {}, + onRemove () {} + } + }).$children[0]; + + return { + show (props) { + modal.$parent.showCancel = props.showCancel; + modal.$parent.iconType = props.icon; + + switch (props.icon) { + case 'info': + modal.$parent.iconName = 'information-circled'; + break; + case 'success': + modal.$parent.iconName = 'checkmark-circled'; + break; + case 'warning': + modal.$parent.iconName = 'android-alert'; + break; + case 'error': + modal.$parent.iconName = 'close-circled'; + break; + case 'confirm': + modal.$parent.iconName = 'help-circled'; + break; + } + + if ('width' in props) { + modal.$parent.width = props.width; + } + + if ('title' in props) { + modal.$parent.title = props.title; + } + + if ('content' in props) { + modal.$parent.body = props.content; + } + + if ('okText' in props) { + modal.$parent.okText = props.okText; + } + + if ('cancelText' in props) { + modal.$parent.cancelText = props.cancelText; + } + + if ('onCancel' in props) { + modal.$parent.onCancel = props.onCancel; + } + + if ('onOk' in props) { + modal.$parent.onOk = props.onOk; + } + + // async for ok + if ('loading' in props) { + modal.$parent.loading = props.loading; + } + + // notice when component destroy + modal.$parent.onRemove = props.onRemove; + + modal.visible = true; + }, + remove () { + modal.visible = false; + modal.$parent.buttonLoading = false; + modal.$parent.remove(); + }, + component: modal + } +}; + +export default Modal; \ No newline at end of file diff --git a/src/components/dialog/dialog.vue b/src/components/dialog/dialog.vue new file mode 100644 index 00000000..05019ac6 --- /dev/null +++ b/src/components/dialog/dialog.vue @@ -0,0 +1,210 @@ + + diff --git a/src/components/dialog/index.js b/src/components/dialog/index.js new file mode 100644 index 00000000..d79863de --- /dev/null +++ b/src/components/dialog/index.js @@ -0,0 +1,60 @@ +import Modal from './confirm'; + +let modalInstance; + +function getModalInstance () { + modalInstance = modalInstance || Modal.newInstance({ + closable: false, + maskClosable: false, + footerHide: true + }); + + return modalInstance; +} + +function confirm (options) { + let instance = getModalInstance(); + + options.onRemove = function () { + modalInstance = null; + }; + + instance.show(options); +} + +export default { + info (props = {}) { + props.icon = 'info'; + props.showCancel = false; + return confirm(props); + }, + success (props = {}) { + props.icon = 'success'; + props.showCancel = false; + return confirm(props); + }, + warning (props = {}) { + props.icon = 'warning'; + props.showCancel = false; + return confirm(props); + }, + error (props = {}) { + props.icon = 'error'; + props.showCancel = false; + return confirm(props); + }, + confirm (props = {}) { + props.icon = 'confirm'; + props.showCancel = true; + return confirm(props); + }, + remove () { + if (!modalInstance) { // at loading status, remove after Cancel + return false; + } + + const instance = getModalInstance(); + + instance.remove(); + } +} \ No newline at end of file diff --git a/src/index.js b/src/index.js index 03a83a84..a18555a2 100644 --- a/src/index.js +++ b/src/index.js @@ -8,6 +8,7 @@ import Card from './components/card'; import Checkbox from './components/checkbox'; import Circle from './components/circle'; import Collapse from './components/collapse'; +import Dialog from './components/dialog'; import Icon from './components/icon'; import Input from './components/input'; import InputNumber from './components/input-number'; @@ -79,7 +80,7 @@ const install = function (Vue) { Vue.prototype.$Loading = LoadingBar; Vue.prototype.$Message = Message; - Vue.prototype.$Modal = Modal; + Vue.prototype.$Modal = Dialog; Vue.prototype.$Notice = Notice; }; diff --git a/src/styles/components/select.less b/src/styles/components/select.less index 3d8b2801..9d3bb235 100644 --- a/src/styles/components/select.less +++ b/src/styles/components/select.less @@ -46,7 +46,7 @@ right: 8px; line-height: 1; margin-top: -6px; - color: @border-color-base; + color: @subsidiary-color; .transition(all @transition-time @ease-in-out); } diff --git a/test/main.js b/test/main.js index 8ab7471c..d3473c63 100644 --- a/test/main.js +++ b/test/main.js @@ -4,8 +4,10 @@ import Vue from 'vue'; import VueRouter from 'vue-router'; import App from './app.vue'; +import iView from '../src/index'; Vue.use(VueRouter); +Vue.use(iView); // 开启debug模式 Vue.config.debug = true; diff --git a/test/routers/message.vue b/test/routers/message.vue index 771af481..d40a657f 100644 --- a/test/routers/message.vue +++ b/test/routers/message.vue @@ -1,124 +1,42 @@ diff --git a/test/routers/slider.vue b/test/routers/slider.vue index 3ba802be..2f89af87 100644 --- a/test/routers/slider.vue +++ b/test/routers/slider.vue @@ -1,17 +1,19 @@