Home Explore Help
Sign In
Yumin
/
ant-design-vue-pro
mirror of https://github.com/vueComponent/ant-design-vue-pro.git
1
0
Fork 0
Files Issues 0 Wiki
Browse Source

feat: page title + first loading

Sendya 6 years ago
parent
b27b4f17f1
commit
ccdcc5a903
3 changed files with 27 additions and 3 deletions
Split View Show Diff Stats
  1. 6 2
      public/index.html
  2. 2 1
      src/permission.js
  3. 19 0
      src/utils/domUtil.js

+ 6 - 2
public/index.html
View File 

@@ -6,14 +6,18 @@
 
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
 
     <link rel="icon" href="<%= BASE_URL %>logo.png">
 
     <title>Ant Design Pro</title>
 
-    <style>#preloadingAnimation{position:fixed;left:0;top:0;height:100%;width:100%;background:#ffffff;user-select:none;z-index: 9999;overflow: hidden}.lds-roller{display:inline-block;position:relative;left:50%;top:50%;transform:translate(-50%,-50%);width:64px;height:64px;}.lds-roller div{animation:lds-roller 1.2s cubic-bezier(0.5,0,0.5,1) infinite;transform-origin:32px 32px;}.lds-roller div:after{content:" ";display:block;position:absolute;width:6px;height:6px;border-radius:50%;background:#13c2c2;margin:-3px 0 0 -3px;}.lds-roller div:nth-child(1){animation-delay:-0.036s;}.lds-roller div:nth-child(1):after{top:50px;left:50px;}.lds-roller div:nth-child(2){animation-delay:-0.072s;}.lds-roller div:nth-child(2):after{top:54px;left:45px;}.lds-roller div:nth-child(3){animation-delay:-0.108s;}.lds-roller div:nth-child(3):after{top:57px;left:39px;}.lds-roller div:nth-child(4){animation-delay:-0.144s;}.lds-roller div:nth-child(4):after{top:58px;left:32px;}.lds-roller div:nth-child(5){animation-delay:-0.18s;}.lds-roller div:nth-child(5):after{top:57px;left:25px;}.lds-roller div:nth-child(6){animation-delay:-0.216s;}.lds-roller div:nth-child(6):after{top:54px;left:19px;}.lds-roller div:nth-child(7){animation-delay:-0.252s;}.lds-roller div:nth-child(7):after{top:50px;left:14px;}.lds-roller div:nth-child(8){animation-delay:-0.288s;}.lds-roller div:nth-child(8):after{top:45px;left:10px;}#preloadingAnimation .load-tips{color: #13c2c2;font-size:2rem;position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);margin-top:80px;text-align:center;width:400px;height:64px;}  @keyframes lds-roller{0%{transform:rotate(0deg);} 100%{transform:rotate(360deg);}}</style>
 
+    <style>#loading-mask{position:fixed;left:0;top:0;height:100%;width:100%;background:#fff;user-select:none;z-index:9999;overflow:hidden}.loading-wrapper{position:absolute;top:50%;left:50%;transform:translate(-50%,-100%)}.loading-dot{animation:antRotate 1.2s infinite linear;transform:rotate(45deg);position:relative;display:inline-block;font-size:64px;width:64px;height:64px;box-sizing:border-box}.loading-dot i{width:22px;height:22px;position:absolute;display:block;background-color:#1890ff;border-radius:100%;transform:scale(.75);transform-origin:50% 50%;opacity:.3;animation:antSpinMove 1s infinite linear alternate}.loading-dot i:nth-child(1){top:0;left:0}.loading-dot i:nth-child(2){top:0;right:0;-webkit-animation-delay:.4s;animation-delay:.4s}.loading-dot i:nth-child(3){right:0;bottom:0;-webkit-animation-delay:.8s;animation-delay:.8s}.loading-dot i:nth-child(4){bottom:0;left:0;-webkit-animation-delay:1.2s;animation-delay:1.2s}@keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@-webkit-keyframes antRotate{to{-webkit-transform:rotate(405deg);transform:rotate(405deg)}}@keyframes antSpinMove{to{opacity:1}}@-webkit-keyframes antSpinMove{to{opacity:1}}</style>
 
   </head>
 
   <body>
 
     <noscript>
 
       <strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
 
     </noscript>
 
     <div id="app">
 
-      <div id="preloadingAnimation"><div class=lds-roller><div></div><div></div><div></div><div></div><div></div><div></div><div></div><div></div></div><div class=load-tips>Loading</div></div>
 
+      <div id="loading-mask">
 
+          <div class="loading-wrapper">
 
+            <span class="loading-dot loading-dot-spin"><i></i><i></i><i></i><i></i></span>
 
+          </div>
 
+        </div>
 
     </div>
 
     <!-- built files will be auto injected -->
 
   </body>

+ 2 - 1
src/permission.js
View File 

@@ -5,6 +5,7 @@ import store from './store'
 
 import NProgress from 'nprogress' // progress bar
 
 import 'nprogress/nprogress.css' // progress bar style
 
 import notification from 'ant-design-vue/es/notification'
 
+import { setDocumentTitle, domTitle } from '@/utils/domUtil'
 
 import { ACCESS_TOKEN } from '@/store/mutation-types'
 
 
 NProgress.configure({ showSpinner: false }) // NProgress Configuration
 
@@ -13,7 +14,7 @@ const whiteList = ['login', 'register', 'registerResult'] // no redirect whiteli
 
 
 router.beforeEach((to, from, next) => {
 
   NProgress.start() // start progress bar
 
-
 
+  to.meta && (typeof to.meta.title !== 'undefined' && setDocumentTitle(`${to.meta.title} - ${domTitle}`))
 
   if (Vue.ls.get(ACCESS_TOKEN)) {
 
     /* has token */
 
     if (to.path === '/user/login') {

+ 19 - 0
src/utils/domUtil.js
View File 

@@ -0,0 +1,19 @@
 
+export const setDocumentTitle = function (title) {
 
+  document.title = title
 
+  const ua = navigator.userAgent
 
+  // eslint-disable-next-line
 
+  const regex = /\bMicroMessenger\/([\d\.]+)/
 
+  if (regex.test(ua) && /ip(hone|od|ad)/i.test(ua)) {
 
+    const i = document.createElement('iframe')
 
+    i.src = '/favicon.ico'
 
+    i.style.display = 'none'
 
+    i.onload = function () {
 
+      setTimeout(function () {
 
+        i.remove()
 
+      }, 9)
 
+    }
 
+    document.body.appendChild(i)
 
+  }
 
+}
 
+
 
+export const domTitle = 'Ant Design Pro'