code init

src/components/loading/index.vue

@@ -0,0 +1,85 @@
+<!-- loading组件 liuyan -->
+<template>
+  <div class="loading-box" :style="style" v-if="loading">
+    <div class="loading-content">
+      <i class="i-icon el-icon-loading spin-loading"></i>
+      <div class="loading-tips">
+        <slot></slot>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'local-loading',
+  props: {
+    // 是否显示隐藏
+    loading: {
+      type: Boolean,
+      default: false
+    },
+    // 是否固定
+    fixed: {
+      type: Boolean,
+      default: false
+    },
+    // 固定依据元素
+    el: {
+      type: String,
+      default: '.container-box'
+    }
+  },
+  data() {
+    return {
+      style: {}
+    }
+  },
+  mounted() {
+    if (this.fixed) {
+      const el = $(this.el)
+      const top = `${el.offset().top}px`
+      const left = `${el.offset().left}px`
+      const width = `${el.outerWidth()}px`
+      const height = `${el.outerHeight()}px`
+      this.style = {
+        position: 'fixed',
+        top,
+        left,
+        width,
+        height,
+        'z-index': 1000
+      }
+    }
+  }
+}
+</script>
+
+<style lang="less">
+  .loading-box{
+    position: absolute;
+    top: 0;
+    left: 0;
+    z-index: 8;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(255, 255, 255, 0.9);
+    border-radius: 8px;
+    user-select: none;
+    .loading-content{
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      color: #3391CE;
+      text-align: center;
+      .spin-loading{
+        animation: rotating 2s linear infinite;
+      }
+      .loading-tips{
+        margin-top: 5px;
+        font-size: 12px;
+      }
+    }
+  }
+</style>