style(loading): 修改loading表现细节

mzz2017 · May 18, 2018 · a7ac3dc · a7ac3dc
1 parent 353e05b
commit a7ac3dc
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 15 deletions.
diff --git a/src/base/loading/loading.vue b/src/base/loading/loading.vue
@@ -10,6 +10,7 @@
           </div>
         </div>
       </div>
+      <p class="refresh" v-show="progressValue===99" @click="location.reload(true)">刷新</p>
       <div class="overlay" v-if="overlay"></div>
     </div>
   </transition>
@@ -44,6 +45,7 @@
       }
     },
     mounted() {
+      //2500是因为我将所有axios请求timeout设为了2500ms
       setTimeout(() => {
         this.progressValue = Math.max(10, this.progressValue)
       }, 250)
@@ -60,7 +62,7 @@
         this.progressValue = Math.max(80, this.progressValue)
       }, 2000)
       setTimeout(() => {
-        this.progressValue = Math.max(100, this.progressValue)
+        this.progressValue = Math.max(99, this.progressValue)
       }, 2500)
     }
   }

diff --git a/src/common/scss/loading.scss b/src/common/scss/loading.scss
@@ -23,6 +23,11 @@ $--padding: 2px;
     margin: 0;
     font-family: 'HoangYen11';
   }
+  .refresh {
+    font-size: 14px;
+    font-weight: bold;
+    cursor: pointer;
+  }
   .progress-wrapper {
     width: $--width;
     height: $--progress-height;
@@ -71,14 +76,3 @@ $--padding: 2px;
     background: rgba(0, 0, 0, .1);
   }
 }
-.loading-fade-leave-active {
-  animation: loading-fade-out .3s;
-}
-@keyframes loading-fade-out {
-  0% {
-    opacity: 1;
-  }
-  100% {
-    opacity: 0;
-  }
-}
diff --git a/src/common/scss/mainPage.scss b/src/common/scss/mainPage.scss
@@ -37,3 +37,16 @@ $primary-blue: #409EFF;
     margin: 10px auto;
   }
 }
+
+.loading-fade-leave-active {
+  animation: loading-fade-out .3s;
+}
+
+@keyframes loading-fade-out {
+  0% {
+    opacity: 1;
+  }
+  100% {
+    opacity: 0;
+  }
+}
diff --git a/src/components/mainPage/mainPage.vue b/src/components/mainPage/mainPage.vue
@@ -67,7 +67,9 @@
         </div>
       </div>
     </el-dialog>
-    <loading v-show="isLoading"></loading>
+    <transition name="loading-fade">
+      <loading v-if="isLoading"></loading>
+    </transition>
   </div>
 </template>
 <script>
@@ -218,7 +220,7 @@
             songName: encodeURIComponent(this.searchContentKeeper),
             pageSize: 15
           },
-          timeout: 2500
+          timeout: 5000
         }).then((response) => {
           let array = []
           process.env.NODE_ENV === 'development' && console.log(response.data.data)
@@ -289,7 +291,7 @@
         axios({
           url: '/api/vkey',
           methods: 'get',
-          timeout: 2500
+          timeout: 5000
         }).then((response) => {
           let vkey = response.data.vkey
           window.localStorage.setItem('vkey', vkey)

diff --git a/src/interceptor/interceptor.js b/src/interceptor/interceptor.js
@@ -12,5 +12,6 @@ axios.interceptors.response.use((res) => {
   store.commit('changeLoadingState', false)
   return res
 }, (error) => {
+  store.commit('changeLoadingState', false)
   return Promise.reject(error)
 })