fixed #1063

src/components/spin/index.js

@@ -1,2 +1,33 @@
-import Spin from './spin.vue';
+import Spin from './spin.js';
+
+let spinInstance;
+
+function getSpinInstance (render = undefined) {
+    spinInstance = spinInstance || Spin.newInstance({
+        render: render
+    });
+
+    return spinInstance;
+}
+
+function loading (options) {
+    const render = ('render' in options) ? options.render : undefined;
+    let instance  = getSpinInstance(render);
+
+    instance.show(options);
+}
+
+Spin.show = function (props = {}) {
+    return loading(props);
+};
+Spin.hide = function () {
+    if (!spinInstance) return false;
+
+    const instance = getSpinInstance();
+
+    instance.remove(() => {
+        spinInstance = null;
+    });
+};
+
 export default Spin;

src/components/spin/spin.js

@@ -0,0 +1,55 @@
+import Vue from 'vue';
+import Spin from './spin.vue';
+
+Spin.newInstance = properties => {
+    const _props = properties || {};
+
+    const Instance = new Vue({
+        data: Object.assign({}, _props, {
+
+        }),
+        render (h) {
+            let vnode = '';
+            if (this.render) {
+                vnode = h(Spin, {
+                    props: {
+                        fix: true,
+                        fullscreen: true
+                    }
+                }, [this.render(h)]);
+            } else {
+                vnode = h(Spin, {
+                    props: {
+                        size: 'large',
+                        fix: true,
+                        fullscreen: true
+                    }
+                });
+            }
+            return h('div', {
+                'class': 'ivu-spin-fullscreen'
+            }, [vnode]);
+        }
+    });
+
+    const component = Instance.$mount();
+    document.body.appendChild(component.$el);
+    const spin = Instance.$children[0];
+
+    return {
+        show () {
+            spin.visible = true;
+        },
+        remove (cb) {
+            spin.visible = false;
+            setTimeout(function() {
+                spin.$parent.$destroy();
+                document.body.removeChild(document.getElementsByClassName('ivu-spin-fullscreen')[0]);
+                cb();
+            }, 500);
+        },
+        component: spin
+    };
+};
+
+export default Spin;

src/components/spin/spin.vue

@@ -1,6 +1,6 @@
 <template>
     <transition name="fade">
-        <div :class="classes">
+        <div :class="classes" v-if="fullscreenVisible">
             <div :class="mainClasses">
                 <span :class="dotClasses"></span>
                 <div :class="textClasses"><slot></slot></div>
@@ -10,11 +10,13 @@
 </template>
 <script>
     import { oneOf } from '../../utils/assist';
+    import ScrollbarMixins from '../modal/mixins-scrollbar';
 
     const prefixCls = 'ivu-spin';
 
     export default {
         name: 'Spin',
+        mixins: [ ScrollbarMixins ],
         props: {
             size: {
                 validator (value) {
@@ -24,11 +26,17 @@
             fix: {
                 type: Boolean,
                 default: false
+            },
+            fullscreen: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
             return {
-                showText: false
+                showText: false,
+                // used for $Spin
+                visible: false
             };
         },
         computed: {
@@ -39,6 +47,7 @@
                         [`${prefixCls}-${this.size}`]: !!this.size,
                         [`${prefixCls}-fix`]: this.fix,
                         [`${prefixCls}-show-text`]: this.showText,
+                        [`${prefixCls}-fullscreen`]: this.fullscreen
                     }
                 ];
             },
@@ -50,6 +59,22 @@
             },
             textClasses () {
                 return `${prefixCls}-text`;
+            },
+            fullscreenVisible () {
+                if (this.fullscreen) {
+                    return this.visible;
+                } else {
+                    return true;
+                }
+            }
+        },
+        watch: {
+            visible (val) {
+                if (val) {
+                    this.addScrollEffect();
+                } else {
+                    this.removeScrollEffect();
+                }
             }
         },
         mounted () {