Skip to content

Commit ccdcc5a

Browse files
sendyasendya
committed
feat: page title + first loading
1 parent b27b4f1 commit ccdcc5a

File tree

3 files changed

+27
-3
lines changed

3 files changed

+27
-3
lines changed

‎public/index.html

+6-2
Original file line numberDiff line numberDiff line change
@@ -6,14 +6,18 @@
66
<meta name="viewport" content="width=device-width,initial-scale=1.0">
77
<link rel="icon" href="<%= BASE_URL %>logo.png">
88
<title>Ant Design Pro</title>
9-
<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>
9+
<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>
1010
</head>
1111
<body>
1212
<noscript>
1313
<strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
1414
</noscript>
1515
<div id="app">
16-
<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>
16+
<div id="loading-mask">
17+
<div class="loading-wrapper">
18+
<span class="loading-dot loading-dot-spin"><i></i><i></i><i></i><i></i></span>
19+
</div>
20+
</div>
1721
</div>
1822
<!-- built files will be auto injected -->
1923
</body>

‎src/permission.js

+2-1
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import store from './store'
55
import NProgress from 'nprogress' // progress bar
66
import 'nprogress/nprogress.css' // progress bar style
77
import notification from 'ant-design-vue/es/notification'
8+
import { setDocumentTitle, domTitle } from '@/utils/domUtil'
89
import { ACCESS_TOKEN } from '@/store/mutation-types'
910

1011
NProgress.configure({ showSpinner: false }) // NProgress Configuration
@@ -13,7 +14,7 @@ const whiteList = ['login', 'register', 'registerResult'] // no redirect whiteli
1314

1415
router.beforeEach((to, from, next) => {
1516
NProgress.start() // start progress bar
16-
17+
to.meta && (typeof to.meta.title !== 'undefined' && setDocumentTitle(`${to.meta.title} - ${domTitle}`))
1718
if (Vue.ls.get(ACCESS_TOKEN)) {
1819
/* has token */
1920
if (to.path === '/user/login') {

‎src/utils/domUtil.js

+19
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
export const setDocumentTitle = function (title) {
2+
document.title = title
3+
const ua = navigator.userAgent
4+
// eslint-disable-next-line
5+
const regex = /\bMicroMessenger\/([\d\.]+)/
6+
if (regex.test(ua) && /ip(hone|od|ad)/i.test(ua)) {
7+
const i = document.createElement('iframe')
8+
i.src = '/favicon.ico'
9+
i.style.display = 'none'
10+
i.onload = function () {
11+
setTimeout(function () {
12+
i.remove()
13+
}, 9)
14+
}
15+
document.body.appendChild(i)
16+
}
17+
}
18+
19+
export const domTitle = 'Ant Design Pro'

0 commit comments

Comments
 (0)