From 7e22e0a38bec094fffffae0db36a35a0c1b6512b Mon Sep 17 00:00:00 2001
From: liuqimichale <123456lq>
Date: Wed, 28 Nov 2018 17:09:05 +0800
Subject: [PATCH] loading

---
 src/components/loading.vue  | 37 +++++++++++++++++++++++++++++++++++++
 src/store/store.js          |  1 +
 src/views/mainContainer.vue | 25 +++++++++++++++++++------
 3 files changed, 57 insertions(+), 6 deletions(-)
 create mode 100644 src/components/loading.vue
 create mode 100644 src/store/store.js

diff --git a/src/components/loading.vue b/src/components/loading.vue
new file mode 100644
index 0000000..cde2b0f
--- /dev/null
+++ b/src/components/loading.vue
@@ -0,0 +1,37 @@
+<!--
+ *
+ * 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>
+
+
diff --git a/src/store/store.js b/src/store/store.js
new file mode 100644
index 0000000..8b13789
--- /dev/null
+++ b/src/store/store.js
@@ -0,0 +1 @@
+
diff --git a/src/views/mainContainer.vue b/src/views/mainContainer.vue
index 109b6ad..06bc8e9 100644
--- a/src/views/mainContainer.vue
+++ b/src/views/mainContainer.vue
@@ -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;
   }
--
libgit2 0.21.4