Skip to content

Commit 1f350b4

Browse files
sendyasendya
committed
feat: add loading css, Update docs
1 parent 31ba7b9 commit 1f350b4

File tree

14 files changed

+70
-14
lines changed

14 files changed

+70
-14
lines changed

‎README.md

+3-1
Original file line numberDiff line numberDiff line change
@@ -122,13 +122,15 @@ yarn run lint
122122
- [路由/菜单说明](https://github.com/sendya/ant-design-pro-vue/blob/master/src/router/README.md)
123123
- [Table 重封装组件](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/table/README.md)
124124
- [ANTD 默认配置项](https://github.com/sendya/ant-design-pro-vue/blob/master/src/defaultSettings.js)
125-
- [按需加载/减少打包大小](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/LoadOnDemand.md)
125+
- [按需加载/减少打包大小](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/LoadOnDemand.md)
126+
- [为首屏增加 Loading 动画](https://github.com/sendya/ant-design-pro-vue/blob/master/docs/Add-Page-Loading-Animate.md)
126127
- ANTD PRO 额外组件
127128
- Trend 趋势标记 [Trend.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/Trend/index.md)
128129
- AvatarList 用户头像列表 [AvatarList.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/AvatarList/index.md)
129130
- CountDown 倒计时 [CountDown.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/CountDown/index.md)
130131
- Ellipsis 文本自动省略号 [Ellipsis.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/Ellipsis/index.md)
131132
- NumberInfo 数据文本 [NumberInfo.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/NumberInfo/index.md)
133+
- FooterToolbar 底部工具栏 [FooterToolbar.md](https://github.com/sendya/ant-design-pro-vue/blob/master/src/components/FooterToolbar/index.md)
132134
- 其他待补充...
133135

134136

‎docs/Add-Page-Loading-Animate.md

+31
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
为首屏增加 加载动画
2+
====
3+
4+
5+
6+
## 需求
7+
8+
> 为了缓解用户第一次访问时，加载 JS 过大所导致用户等待白屏时间过长导致的用户体验不好，进行的一个优化动效。
9+
10+
11+
12+
## 实现方案
13+
14+
1. 将 动画加载 dom 元素放在 #app 内，Vue 生命周期开始时，会自动清掉 #app 下的所有元素。
15+
2. 将 动画加载 dom 元素放在 body 下，Vue 生命周期开始时 App.vue (created, mounted) 调用 `@/utils/utll` 下的 removeLoadingAnimate(#id, timeout) 则会移除加载动画
16+
17+
最后一步：
18+
​ 将样式插入到 `public/index.html` 文件的 `<head></head>` 最好写成内联 `<style>动画样式</style>`
19+
20+
21+
22+
----
23+
24+
目前提供有两个样式，均在 `public/loading` 文件夹内。且 pro 已经默认使用了一套 loading 动画方案，可以直接参考 `public/index.html`
25+
26+
27+
## 写在最后
28+
29+
目前 pro 有页面 overflow 显示出浏览器滚动条时，页面会抖动一下的问题。
30+
31+
欢迎各位提供能解决的方案和实现 demo。如果在条件允许的情况下，建议请直接使用 pro 进行改造，也欢迎直接 PR 到 pro 的仓库

‎public/index.html

+6
Original file line numberDiff line numberDiff line change
@@ -6,11 +6,17 @@
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>.preloading-animate{background:#ffffff;width:100%;height:100%;position:fixed;left:0;top:0;z-index:299;}.preloading-animate .preloading-wrapper{position:absolute;width:5rem;height:5rem;left:50%;top:50%;transform:translate(-50%,-50%);}.preloading-animate .preloading-wrapper .preloading-balls{font-size:5rem;}</style>
910
</head>
1011
<body>
1112
<noscript>
1213
<strong>We're sorry but vue-antd-pro doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
1314
</noscript>
15+
<div id="preloadingWrapper" class="preloading-animate">
16+
<div class="preloading-wrapper">
17+
<img src="/loading/option2/loading.svg" />
18+
</div>
19+
</div>
1420
<div id="app"></div>
1521
<!-- built files will be auto injected -->
1622
</body>

‎public/loading/option2/html_code_segment.html

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<div class="preloading-animate">
2+
<div class="preloading-wrapper">
3+
<svg class="preloading-balls" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid"><circle cx="67.802" cy="59.907" r="6" fill="#51CACC"><animate attributeName="cx" values="75;57.72542485937369" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="50;73.77641290737884" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#51CACC;#9DF871" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="46.079" cy="69.992" r="6" fill="#9DF871"><animate attributeName="cx" values="57.72542485937369;29.774575140626318" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="73.77641290737884;64.69463130731182" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#9DF871;#E0FF77" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="29.775" cy="52.449" r="6" fill="#E0FF77"><animate attributeName="cx" values="29.774575140626318;29.774575140626315" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="64.69463130731182;35.30536869268818" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#E0FF77;#DE9DD6" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="41.421" cy="31.521" r="6" fill="#DE9DD6"><animate attributeName="cx" values="29.774575140626315;57.72542485937368" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="35.30536869268818;26.22358709262116" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#DE9DD6;#FF708E" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle><circle cx="64.923" cy="36.13" r="6" fill="#FF708E"><animate attributeName="cx" values="57.72542485937368;75" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="cy" values="26.22358709262116;49.99999999999999" keyTimes="0;1" dur="1s" repeatCount="indefinite"/><animate attributeName="fill" values="#FF708E;#51CACC" keyTimes="0;1" dur="1s" repeatCount="indefinite"/></circle></svg>
4+
</div>
5+
</div>

‎public/loading/option2/loading.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎public/loading/option2/loading.svg

+1
Loading

‎src/api/index.js

+1
Original file line numberDiff line numberDiff line change
@@ -4,6 +4,7 @@ const api = {
44
ForgePassword: '/auth/forge-password',
55
Register: '/auth/register',
66
SendSms: '/account/sms',
7+
SendSmsErr: '/account/sms_err',
78
// get my info
89
UserInfo: '/user/info'
910
}

‎src/components/FooterToolbar/index.md

+1-1
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
# FooterToolbar底部工具栏
1+
# FooterToolbar 底部工具栏
22

33
固定在底部的工具栏。
44

‎src/components/page/GlobalLayout.vue

+1-2
Original file line numberDiff line numberDiff line change
@@ -67,9 +67,8 @@
6767
<a-layout-footer style="padding: 0px">
6868
<global-footer />
6969
</a-layout-footer>
70+
<setting-drawer></setting-drawer>
7071
</a-layout>
71-
72-
<setting-drawer></setting-drawer>
7372
</a-layout>
7473
</template>
7574

‎src/components/setting/SettingDrawer.vue

+2-1
Original file line numberDiff line numberDiff line change
@@ -1,11 +1,12 @@
11
<template>
2-
<div class="setting-drawer">
2+
<div class="setting-drawer" ref="settingDrawer">
33
<a-drawer
44
width="300"
55
placement="right"
66
:closable="false"
77
@close="onClose"
88
:visible="visible"
9+
:getContainer="() => $refs.settingDrawer"
910
:style="{}"
1011
>
1112
<div class="setting-drawer-index-content">

‎src/main.js

+3
Original file line numberDiff line numberDiff line change
@@ -13,6 +13,7 @@ import 'ant-design-vue/dist/antd.less' // or 'ant-design-vue/dist/antd.less'
1313
import '@/permission' // permission control
1414
import '@/utils/filter' // base filter
1515
import PermissionHelper from '@/utils/helper/permission'
16+
import { removeLoadingAnimate } from '@/utils/util'
1617

1718
import {
1819
ACCESS_TOKEN,
@@ -50,6 +51,8 @@ new Vue({
5051
store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
5152
store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
5253
store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
54+
55+
removeLoadingAnimate('preloadingWrapper')
5356
},
5457
render: h => h(App)
5558
}).$mount('#app')

‎src/utils/util.js

+14
Original file line numberDiff line numberDiff line change
@@ -18,4 +18,18 @@ export function triggerWindowResizeEvent() {
1818
event.initEvent('resize', true, true)
1919
event.eventType = 'message'
2020
window.dispatchEvent(event)
21+
}
22+
23+
/**
24+
* Remove loading animate
25+
* @param id parent element id or class
26+
* @param timeout
27+
*/
28+
export function removeLoadingAnimate(id = '', timeout = 1500) {
29+
if (id === '') {
30+
return
31+
}
32+
setTimeout(() => {
33+
document.getElementById(id).remove()
34+
}, timeout)
2135
}

‎vue.config.js

+1-1
Original file line numberDiff line numberDiff line change
@@ -60,7 +60,7 @@ module.exports = {
6060
proxy: {
6161
'/api': {
6262
// target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
63-
target: 'https://www.easy-mock.com/mock/5b7bce071f130e5b7fe8cd7d/antd-pro',
63+
target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
6464
ws: false,
6565
changeOrigin: true
6666
},

‎yarn.lock

-8
Original file line numberDiff line numberDiff line change
@@ -1695,14 +1695,6 @@ babel-plugin-dynamic-import-node@^2.2.0:
16951695
dependencies:
16961696
object.assign "^4.1.0"
16971697

1698-
babel-plugin-import@^1.11.0:
1699-
version "1.11.0"
1700-
resolved "https://registry.yarnpkg.com/babel-plugin-import/-/babel-plugin-import-1.11.0.tgz#78ac908e6b225206babb734e19eae5f78d6d1035"
1701-
integrity sha512-de9dWdU1YjmWRPYurlHRKD2hTd24z0bIQ0/JgyXqLMXML+TsvEkVhtqzOsNtu9MmCuvwBiTTTjZBbZXA1Xu7TQ==
1702-
dependencies:
1703-
"@babel/helper-module-imports" "^7.0.0"
1704-
"@babel/runtime" "^7.0.0"
1705-
17061698
babel-plugin-transform-runtime@^6.23.0:
17071699
version "6.23.0"
17081700
resolved "http://registry.npm.taobao.org/babel-plugin-transform-runtime/download/babel-plugin-transform-runtime-6.23.0.tgz#88490d446502ea9b8e7efb0fe09ec4d99479b1ee"

0 commit comments

Comments
 (0)