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

@@ -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 = `
+        <Modal${props} :visible.sync="visible" :width="width">
+            <div class="${prefixCls}">
+                <div class="${prefixCls}-head">
+                    <div :class="iconTypeCls"><i :class="iconNameCls"></i></div>
+                    <div class="${prefixCls}-head-title">{{{ title }}}</div>
+                </div>
+                <div class="${prefixCls}-body">
+                    {{{ body }}}
+                </div>
+                <div class="${prefixCls}-footer">
+                    <i-button type="ghost" size="large" v-if="showCancel" @click="cancel">{{ cancelText }}</i-button>
+                    <i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
+                </div>
+            </div>
+        </Modal>
+    `;
+    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;

src/components/dialog/dialog.vue

@@ -0,0 +1,210 @@
+<template>
+    <div :class="wrapClasses">
+        <div :class="maskClasses" v-show="visible" @click="mask" transition="fade"></div>
+        <div :class="classes" :style="styles" v-show="visible" transition="ease">
+            <div :class="[prefixCls + '-content']">
+                <a :class="[prefixCls + '-close']" v-if="closable" @click="close">
+                    <slot name="close">
+                        <Icon type="ios-close-empty"></Icon>
+                    </slot>
+                </a>
+                <div :class="[prefixCls + '-header']" v-if="showHead" v-el:head><slot name="header"><div :class="[prefixCls + '-header-inner']">{{ title }}</div></slot></div>
+                <div :class="[prefixCls + '-body']"><slot></slot></div>
+                <div :class="[prefixCls + '-footer']" v-if="!footerHide">
+                    <slot name="footer">
+                        <i-button type="ghost" size="large" @click="cancel">{{ cancelText }}</i-button>
+                        <i-button type="primary" size="large" :loading="buttonLoading" @click="ok">{{ okText }}</i-button>
+                    </slot>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+    import Icon from '../icon';
+    import iButton from '../button/button.vue';
+    import { getScrollBarSize } from '../../utils/assist';
+
+    const prefixCls = 'ivu-modal';
+
+    export default {
+        components: { Icon, iButton },
+        props: {
+            visible: {
+                type: Boolean,
+                default: false
+            },
+            closable: {
+                type: Boolean,
+                default: true
+            },
+            maskClosable: {
+                type: Boolean,
+                default: true
+            },
+            title: {
+                type: String
+            },
+            width: {
+                type: [Number, String],
+                default: 520
+            },
+            okText: {
+                type: String,
+                default: '确定'
+            },
+            cancelText: {
+                type: String,
+                default: '取消'
+            },
+            loading: {
+                type: Boolean,
+                default: false
+            },
+            style: {
+                type: Object
+            },
+            className: {
+                type: String
+            },
+            // for instance
+            footerHide: {
+                type: Boolean,
+                default: false
+            }
+        },
+        data () {
+            return {
+                prefixCls: prefixCls,
+                wrapShow: false,
+                showHead: true,
+                buttonLoading: false
+            }
+        },
+        computed: {
+            wrapClasses () {
+                return [
+                    `${prefixCls}-wrap`,
+                    {
+                        [`${prefixCls}-hidden`]: !this.wrapShow,
+                        [`${this.className}`]: !!this.className
+                    }
+                ]
+            },
+            maskClasses () {
+                return `${prefixCls}-mask`;
+            },
+            classes () {
+                return `${prefixCls}`;
+            },
+            styles () {
+                let style = {};
+
+                const styleWidth = {
+                    width: `${this.width}px`
+                };
+
+                const customStyle = !!this.style ? this.style : {};
+
+                Object.assign(style, styleWidth, customStyle);
+
+                return style;
+            }
+        },
+        methods: {
+            close () {
+                this.visible = false;
+                this.$emit('on-cancel');
+            },
+            mask () {
+                if (this.maskClosable) {
+                    this.close();
+                }
+            },
+            cancel () {
+                this.close();
+            },
+            ok () {
+                if (this.loading) {
+                    this.buttonLoading = true;
+                } else {
+                    this.visible = false;
+                }
+                this.$emit('on-ok');
+            },
+            EscClose (e) {
+                if (this.visible && this.closable) {
+                    if (e.keyCode === 27) {
+                        this.close()
+                    }
+                }
+            },
+            checkScrollBar () {
+                let fullWindowWidth = window.innerWidth;
+                if (!fullWindowWidth) { // workaround for missing window.innerWidth in IE8
+                    const documentElementRect = document.documentElement.getBoundingClientRect();
+                    fullWindowWidth = documentElementRect.right - Math.abs(documentElementRect.left);
+                }
+                this.bodyIsOverflowing = document.body.clientWidth < fullWindowWidth;
+                if (this.bodyIsOverflowing) {
+                    this.scrollBarWidth = getScrollBarSize();
+                }
+            },
+            setScrollBar () {
+                if (this.bodyIsOverflowing && this.scrollBarWidth !== undefined) {
+                    document.body.style.paddingRight = `${this.scrollBarWidth}px`;
+                }
+            },
+            resetScrollBar () {
+                document.body.style.paddingRight = '';
+            },
+            addScrollEffect () {
+                this.checkScrollBar();
+                this.setScrollBar();
+                document.body.style.overflow = 'hidden';
+            },
+            removeScrollEffect() {
+                document.body.style.overflow = '';
+                this.resetScrollBar();
+            }
+        },
+        ready () {
+            if (this.visible) {
+                this.wrapShow = true;
+            }
+
+            let showHead = true;
+
+            if (this.$els.head.innerHTML == `<div class="${prefixCls}-header-inner"></div>` && !this.title) {
+                showHead = false;
+            }
+
+            this.showHead = showHead;
+
+            // ESC close
+            document.addEventListener('keydown', this.EscClose);
+        },
+        beforeDestroy () {
+            document.removeEventListener('keydown', this.EscClose);
+        },
+        watch: {
+            visible (val) {
+                if (val === false) {
+                    this.buttonLoading = false;
+                    setTimeout(() => {
+                        this.wrapShow = false;
+                    }, 300);
+                    this.removeScrollEffect();
+                } else {
+                    this.wrapShow = true;
+                    this.addScrollEffect();
+                }
+            },
+            loading (val) {
+                if (!val) {
+                    this.buttonLoading = false;
+                }
+            }
+        }
+    }
+</script>

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();
+    }
+}

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;
 };
 

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);
     }
 

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;

test/routers/message.vue

@@ -1,124 +1,42 @@
 <template>
-    <i-button @click="mInfo">m信息</i-button>
+    <i-button @click="instance('info')">消息</i-button>
-    <i-button @click="open">打开</i-button>
+    <i-button @click="instance('success')">成功</i-button>
-    <i-button @click="info2">消息2</i-button>
+    <i-button @click="instance('warning')">警告</i-button>
-    <i-button @click="info">消息</i-button>
+    <i-button @click="instance('error')">错误</i-button>
-    <i-button @click="success">成功</i-button>
-    <i-button @click="warning">警告</i-button>
-    <i-button @click="error">错误</i-button>
-    <i-button @click="modal1 = true"></i-button>
-    <Modal
-            :visible.sync="modal1"
-            title="普通的Modal对话框标题">
-        <p>对话框内容</p>
-        <p>对话框内容</p>
-        <p>对话框内容</p>
-    </Modal>
 </template>
 <script>
-    import { Message, Button, Alert, Card, Notice, iButton, Modal } from 'iview';
-
     export default {
-        components: {
-            Message,
-            iButton,
-            Alert,
-            Card,
-            Notice,
-            iButton,
-            Modal
-        },
-        props: {
-
-        },
-        data () {
-            return {
-                modal1: false
-            }
-        },
-        computed: {
-
-        },
         methods: {
-            open () {
+            instance (type) {
-                Notice.open({
+                const title = '对话框的标题';
-                    duration: 1000,
+                const content = '<p>一些对话框内容</p><p>一些对话框内容</p>';
-                    title: '这是通知标题',
+                switch (type) {
-                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
+                    case 'info':
-                })
+                        this.$Modal.info({
-            },
+                            title: title,
-            info () {
+                            content: content
-                Notice.info({
+                        });
-                    duration: 1000,
+                        break;
-                    title: '这是通知标题',
+                    case 'success':
-//                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描述这里是通知描述'
+                        this.$Modal.success({
-                });
+                            title: title,
-            },
+                            content: content
-            info2 () {
+                        });
-                Notice.open({
+                        break;
-                    duration: 1000,
+                    case 'warning':
-                    title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题'
+                        this.$Modal.warning({
-                });
+                            title: title,
-                Notice.info({
+                            content: content
-                    duration: 1000,
+                        });
-                    title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题'
+                        break;
-                });
+                    case 'error':
-                Notice.open({
+                        this.$Modal.error({
-                    duration: 1000,
+                            title: title,
-                    title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题',
+                            content: content
-                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
+                        });
-                });
+                        break;
-                Notice.info({
+                }
-                    duration: 1000,
-                    title: '这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题这是通知标题',
-                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
-                });
-                Notice.success({
-                    duration: 1000,
-                    title: '这是通知标题',
-                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
-                });
-                Notice.warning({
-                    duration: 1000,
-                    title: '这是通知标题',
-                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
-                });
-                Notice.error({
-                    duration: 1000,
-                    title: '这是通知标题',
-                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
-                });
-            },
-            success () {
-                Notice.success({
-                    duration: 1000,
-                    title: '这是通知标题',
-                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
-                });
-            },
-            warning () {
-                Notice.warning({
-                    duration: 1000,
-                    title: '这是通知标题',
-                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
-                });
-            },
-            error () {
-                Notice.error({
-                    duration: 1000,
-                    title: '这是通知标题',
-                    desc: '这里是通知描述这里,是通知描述这里是通知描述这里,是通知描述这里,是通知描述这里是通知描'
-                });
-            },
-            mInfo () {
-                Message.info('飞机飞士大夫', 1000);
             }
-        },
-        ready () {
-//            Message.config({
-//                top: 50,
-//                duration: 8
-//            });
         }
     }
 </script>

test/routers/slider.vue

@@ -1,17 +1,19 @@
 <template>
-    <div style="width: 400px;margin:100px;">
+    <div style="width: 140px;margin:100px;">
-        {{ value }}
+        <!--{{ value }}-->
-        <Slider @on-change="change" :step="15"></Slider>
+        <!--<Slider @on-change="change" :step="15"></Slider>-->
-        <Slider :value="40" :tip-format="format"></Slider>
+        <!--<Slider :value="40" :tip-format="format"></Slider>-->
-        <Slider :value.sync="value" show-input show-stops range @on-change="change" :step="13"></Slider>
+        <!--<Slider :value.sync="value" show-input show-stops range @on-change="change" :step="13"></Slider>-->
         <!--<Slider :max="10"></Slider>-->
         <!--<Slider :step="13"></Slider>-->
         <!--<Slider :step="13" :max="60"></Slider>-->
-        <Icon type="checkmark-circled" size="40" color="#f60"></Icon>
+        <!--<Icon type="checkmark-circled" size="40" color="#f60"></Icon>-->
-        <p>附近的首付款是东方红看就是</p>
+        <!--<p>附近的首付款是东方红看就是</p>-->
-        <div class="ivu-article">
+        <!--<div class="ivu-article">-->
-            <a href="http://www.iviewui.com" target="_blank">iView</a>
+            <!--<a href="http://www.iviewui.com" target="_blank">iView</a>-->
-        </div>
+        <!--</div>-->
+        <Slider :value="75"></Slider>
+        <!--<Slider :value="[20, 50]" range></Slider>-->
     </div>
 </template>
 <script>