loading

liuqimichale
1 parent 1214e8b7
Showing 3 changed files with 57 additions and 6 deletions
src/components/loading.vue
src/store/store.js
src/views/mainContainer.vue
+<!--
+ *
+ * loadingGif组件--"数据请求中"
+ *
+ * 使用方法：
+ * <loading-gif :show-loading="showLoaddingGif"></loading-gif>
+ *
+ *  通过修改showLoaddingGif的true或者false 来控制loading的显示和隐藏!
+ *
+ -->
+<template>
+  <div class='loading-wrap'  v-show="showLoading">
+    加载中。。。。。。
+  </div>
+</template>
+
+
+<script>
+export default {
+  props: ["showLoading"],
+  name: 'loading'
+}
+</script>
+
+
+<style scoped>
+.loading-wrap{
+  position: fixed;
+  top:0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: #ccc;
+}
+</style>
+
+
@@ -16,12 +16,21 @@
         <div class="heightsmall"></div>
       </li>
     </ul>
+    <loadinggif :showLoading="showLoaddingGif"></loadinggif>
   </div>
 </template>
 <script>
+import loadinggif from '../components/loading'
+
 export default {
-  name: 'mainContainer'
+  name: 'mainContainer',
+  components: {loadinggif},
+  data() {
+    return {
+      showLoaddingGif: false
+    }
+  }
 }
 </script>
@@ -30,7 +39,8 @@ export default {
     padding: 12px 12px;
     flex: 1;
   }
-  .containerwrap{
+
+  .containerwrap {
     display: flex;
     height: 100%;
   }
@@ -44,7 +54,8 @@ export default {
   .containerwrap > li:nth-of-type(1) {
     flex: 1;
   }
-  .heightsmall{
+
+  .heightsmall {
     flex: 1;
     background: #f00;
   }
@@ -52,12 +63,14 @@ export default {
   .containerwrap > li:nth-of-type(2) {
     flex: 2;
   }
-  .heightper-top{
+
+  .heightper-top {
     background: #f00;
     flex: 1;
   }
-  .heightper-bottom{
-    height: calc((100% - 24px)/3) ;
+
+  .heightper-bottom {
+    height: calc((100% - 24px) / 3);
     background: #f00;
     margin-top: 12px;
   }