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: add loading css, Update docs

Sendya 6 years ago
parent
31ba7b97d3
commit
1f350b41bf
14 changed files with 66 additions and 14 deletions
Split View Show Diff Stats
  1. 3 1
      README.md
  2. 31 0
      docs/Add-Page-Loading-Animate.md
  3. 6 0
      public/index.html
  4. 2 0
      public/loading/option2/html_code_segment.html
  5. 1 0
      public/loading/option2/loading.css
  6. 0 0
      public/loading/option2/loading.svg
  7. 1 0
      src/api/index.js
  8. 1 1
      src/components/FooterToolbar/index.md
  9. 1 2
      src/components/page/GlobalLayout.vue
  10. 2 1
      src/components/setting/SettingDrawer.vue
  11. 3 0
      src/main.js
  12. 14 0
      src/utils/util.js
  13. 1 1
      vue.config.js
  14. 0 8
      yarn.lock

+ 3 - 1
README.md
View File 

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

+ 31 - 0
docs/Add-Page-Loading-Animate.md
View File 

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

+ 6 - 0
public/index.html
View File 

@@ -6,11 +6,17 @@
 
     <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>.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>
 
   </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="preloadingWrapper" class="preloading-animate">
 
+      <div class="preloading-wrapper">
 
+        <img src="/loading/option2/loading.svg" />
 
+      </div>
 
+    </div>
 
     <div id="app"></div>
 
     <!-- built files will be auto injected -->
 
   </body>

File diff suppressed because it is too large
+ 2 - 0
public/loading/option2/html_code_segment.html


+ 1 - 0
public/loading/option2/loading.css
View File 

@@ -0,0 +1 @@
 
+.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;}

File diff suppressed because it is too large
+ 0 - 0
public/loading/option2/loading.svg


+ 1 - 0
src/api/index.js
View File 

@@ -4,6 +4,7 @@ const api = {
 
     ForgePassword: '/auth/forge-password',
 
     Register: '/auth/register',
 
     SendSms: '/account/sms',
 
+    SendSmsErr: '/account/sms_err',
 
     // get my info
 
     UserInfo: '/user/info'
 
 }

+ 1 - 1
src/components/FooterToolbar/index.md
View File 

@@ -1,4 +1,4 @@
 
-# FooterToolbar底部工具栏
 
+# FooterToolbar 底部工具栏
 
 
 固定在底部的工具栏。

+ 1 - 2
src/components/page/GlobalLayout.vue
View File 

@@ -67,9 +67,8 @@
 
       <a-layout-footer style="padding: 0px">
 
         <global-footer />
 
       </a-layout-footer>
 
+      <setting-drawer></setting-drawer>
 
     </a-layout>
 
-
 
-    <setting-drawer></setting-drawer>
 
   </a-layout>
 
 </template>

+ 2 - 1
src/components/setting/SettingDrawer.vue
View File 

@@ -1,11 +1,12 @@
 
 <template>
 
-  <div class="setting-drawer">
 
+  <div class="setting-drawer" ref="settingDrawer">
 
     <a-drawer
 
       width="300"
 
       placement="right"
 
       :closable="false"
 
       @close="onClose"
 
       :visible="visible"
 
+      :getContainer="() => $refs.settingDrawer"
 
       :style="{}"
 
     >
 
       <div class="setting-drawer-index-content">

+ 3 - 0
src/main.js
View File 

@@ -13,6 +13,7 @@ import 'ant-design-vue/dist/antd.less'  // or 'ant-design-vue/dist/antd.less'
 
 import '@/permission' // permission control
 
 import '@/utils/filter' // base filter
 
 import PermissionHelper from '@/utils/helper/permission'
 
+import { removeLoadingAnimate } from '@/utils/util'
 
 
 import {
 
   ACCESS_TOKEN,
 
@@ -50,6 +51,8 @@ new Vue({
 
     store.commit('TOGGLE_WEAK', Vue.ls.get(DEFAULT_COLOR_WEAK, config.colorWeak))
 
     store.commit('TOGGLE_COLOR', Vue.ls.get(DEFAULT_COLOR, config.primaryColor))
 
     store.commit('SET_TOKEN', Vue.ls.get(ACCESS_TOKEN))
 
+
 
+    removeLoadingAnimate('preloadingWrapper')
 
   },
 
   render: h => h(App)
 
 }).$mount('#app')

+ 14 - 0
src/utils/util.js
View File 

@@ -18,4 +18,18 @@ export function triggerWindowResizeEvent() {
 
   event.initEvent('resize', true, true)
 
   event.eventType = 'message'
 
   window.dispatchEvent(event)
 
+}
 
+
 
+/**
 
+ * Remove loading animate
 
+ * @param id parent element id or class
 
+ * @param timeout
 
+ */
 
+export function removeLoadingAnimate(id = '', timeout = 1500) {
 
+  if (id === '') {
 
+    return
 
+  }
 
+  setTimeout(() => {
 
+    document.getElementById(id).remove()
 
+  }, timeout)
 
 }

+ 1 - 1
vue.config.js
View File 

@@ -60,7 +60,7 @@ module.exports = {
 
     proxy: {
 
       '/api': {
 
         // target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
 
-        target: 'https://www.easy-mock.com/mock/5b7bce071f130e5b7fe8cd7d/antd-pro',
 
+        target: 'https://mock.ihx.me/mock/5baf3052f7da7e07e04a5116/antd-pro',
 
         ws: false,
 
         changeOrigin: true
 
       },

+ 0 - 8
yarn.lock
View File 

@@ -1695,14 +1695,6 @@ babel-plugin-dynamic-import-node@^2.2.0:
 
   dependencies:
 
     object.assign "^4.1.0"
 
 
-babel-plugin-import@^1.11.0:
 
-  version "1.11.0"
 
-  resolved "https://registry.yarnpkg.com/babel-plugin-import/-/babel-plugin-import-1.11.0.tgz#78ac908e6b225206babb734e19eae5f78d6d1035"
 
-  integrity sha512-de9dWdU1YjmWRPYurlHRKD2hTd24z0bIQ0/JgyXqLMXML+TsvEkVhtqzOsNtu9MmCuvwBiTTTjZBbZXA1Xu7TQ==
 
-  dependencies:
 
-    "@babel/helper-module-imports" "^7.0.0"
 
-    "@babel/runtime" "^7.0.0"
 
-
 
 babel-plugin-transform-runtime@^6.23.0:
 
   version "6.23.0"
 
   resolved "http://registry.npm.taobao.org/babel-plugin-transform-runtime/download/babel-plugin-transform-runtime-6.23.0.tgz#88490d446502ea9b8e7efb0fe09ec4d99479b1ee"

Some files were not shown because too many files changed in this diff