feat: add page-loading

src/components/PageLoading/index.jsx

@@ -1,10 +1,106 @@
 import { Spin } from 'ant-design-vue'
 
-export default {
+export const PageLoading = {
   name: 'PageLoading',
+  props: {
+    tip: {
+      type: String,
+      default: 'Loading..'
+    },
+    size: {
+      type: String,
+      default: 'large'
+    }
+  },
   render () {
-    return (<div style={{ paddingTop: 100, textAlign: 'center' }}>
-      <Spin size="large" />
+    const style = {
+      textAlign: 'center',
+      background: 'rgba(0,0,0,0.6)',
+      position: 'absolute',
+      width: '100%',
+      height: '100%',
+      left: 0,
+      top: 0,
+      zIndex: 1100
+    }
+    const spinStyle = {
+      position: 'absolute',
+      left: '50%',
+      top: '40%',
+      transform: 'translate(-50%, -50%)'
+    }
+    return (<div style={style}>
+      <Spin size={this.size} style={spinStyle} tip={this.tip} />
     </div>)
   }
 }
+
+const version = '0.0.1'
+const loading = {}
+
+loading.newInstance = (Vue, options) => {
+  let loadingElement = document.querySelector('body>div[type=loading]')
+  if (!loadingElement) {
+    loadingElement = document.createElement('div')
+    loadingElement.setAttribute('type', 'loading')
+    loadingElement.setAttribute('class', 'ant-loading-wrapper')
+    document.body.appendChild(loadingElement)
+  }
+
+  const cdProps = Object.assign({ visible: false, size: 'large', tip: 'Loading...' }, options)
+
+  const instance = new Vue({
+    data () {
+      return {
+        ...cdProps
+      }
+    },
+    render () {
+      const { tip } = this
+      const props = {}
+      this.tip && (props.tip = tip)
+      if (this.visible) {
+        return <PageLoading { ...{ props } } />
+      }
+      return null
+    }
+  }).$mount(loadingElement)
+
+  function update (config) {
+    const { visible, size, tip } = { ...cdProps, ...config }
+    instance.$set(instance, 'visible', visible)
+    if (tip) {
+      instance.$set(instance, 'tip', tip)
+    }
+    if (size) {
+      instance.$set(instance, 'size', size)
+    }
+  }
+
+  return {
+    instance,
+    update
+  }
+}
+
+const api = {
+  show: function (options) {
+    this.instance.update({ ...options, visible: true })
+  },
+  hide: function () {
+    this.instance.update({ visible: false })
+  }
+}
+
+const install = function (Vue, options) {
+  if (Vue.prototype.$loading) {
+    return
+  }
+  api.instance = loading.newInstance(Vue, options)
+  Vue.prototype.$loading = api
+}
+
+export default {
+  version,
+  install
+}

src/core/use.js

@@ -7,10 +7,11 @@ import Antd from 'ant-design-vue'
 import Viser from 'viser-vue'
 import VueCropper from 'vue-cropper'
 import 'ant-design-vue/dist/antd.less'
-import MultiTab from '@/components/MultiTab'
 
 // ext library
 import VueClipboard from 'vue-clipboard2'
+import MultiTab from '@/components/MultiTab'
+import PageLoading from '@/components/PageLoading'
 import PermissionHelper from '@/utils/helper/permission'
 // import '@/components/use'
 import './directives/action'
@@ -20,6 +21,7 @@ VueClipboard.config.autoSetContainer = true
 Vue.use(Antd)
 Vue.use(Viser)
 Vue.use(MultiTab)
+Vue.use(PageLoading)
 Vue.use(VueStorage, config.storageOptions)
 Vue.use(VueClipboard)
 Vue.use(PermissionHelper)

src/views/dashboard/TestWork.vue

@@ -8,6 +8,11 @@
       <a-button @click="handleOpenTab">打开 任务列表</a-button>
     </div>
     <a-divider />
+    <div class="page-loading-test">
+      <h4>全局遮罩测试</h4>
+      <a-button @click="handleOpenLoading" style="margin-right: 16px;">打开遮罩(5s 自动关闭)</a-button>
+      <a-button @click="handleOpenLoadingCustomTip">打开遮罩(自定义提示语)</a-button>
+    </div>
   </div>
 </template>
 
@@ -20,6 +25,19 @@ export default {
     },
     handleOpenTab () {
       this.$multiTab.open('/features/task')
+    },
+
+    handleOpenLoading () {
+      this.$loading.show()
+      setTimeout(() => {
+        this.$loading.hide()
+      }, 5000)
+    },
+    handleOpenLoadingCustomTip () {
+      this.$loading.show({ tip: '自定义提示语' })
+      setTimeout(() => {
+        this.$loading.hide()
+      }, 5000)
     }
   }
 }