Vue中定製公共組件之loading

需求：在頁面加載前或者請求響應之前使用loading

commonLoading組件：

<template>
  <section>
    <div class="common-loading">
      <div class="loading-container">
        <img src="../../assets/conLoading.gif"
             class="loading-image" />
        <p class="loading-text">LOADING...</p>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'commonLoading',
  data () {
    return {
    }
  },
  components: {},
  methods: {}
}

</script>
<style lang='less' scoped>
.common-loading {
  width: 100vw;
  height: 100vh;
  display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
  display: -moz-flex; /* Firefox 18+ */
  display: -ms-flexbox; /* IE 10 */
  display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  z-index: 999;
  position: fixed;
  top: 0;
  left: 0;
  background-color: #fff;
  .loading-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    z-index: 1000;
    .loading-image {
      width: 100px;
      height: 100px;
      display: block;
    }
    .loading-text {
      font-size: 14px;
      color: #444;
      text-align: center;
      margin-top: 10px;
      margin-left: 15px;
      letter-spacing: 2px;
    }
  }
}
</style>

在頁面中使用：

   1.背景爲全屏的情況

<!-- html部分 -->
<common-loading v-if="commonLoading">
</common-loading>

// Js部分
const CommonLoading = resolve => require(['@/views/common/commonLoading'], resolve)

data () {
  return {
    commonLoading: false
  }
}

components: {
  CommonLoading
}

   2.背景爲自定義組件的情況

    commonRequestLoading組件：

<template>
  <section>
    <div class="common-request-loading"
         :style="{width: loadingWidth, height: loadingHeight, top: loadingTop, left: loadingLeft}">
      <div class="loading-container">
        <img src="../../assets/commonLoading.gif"
             class="loading-image" />
        <p class="loading-text">LOADING...</p>
      </div>
    </div>
  </section>
</template>

<script>
export default {
  name: 'commonRequestLoading',
  data () {
    return {
    }
  },
  props: {
    loadingWidth: {
      default: '400px',
      type: String
    },
    loadingHeight: {
      default: '300px',
      type: String
    },
    loadingTop: {
      default: '0px',
      type: String
    },
    loadingLeft: {
      default: '0px',
      type: String
    },
  },
  components: {},
  methods: {}
}

</script>
<style lang='less' scoped>
.common-request-loading {
  display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
  display: -moz-flex; /* Firefox 18+ */
  display: -ms-flexbox; /* IE 10 */
  display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
  -webkit-box-pack: center;
  -ms-flex-pack: center;
  -webkit-justify-content: center;
  justify-content: center;
  -webkit-box-align: center;
  -ms-flex-align: center;
  -webkit-align-items: center;
  align-items: center;
  z-index: 999;
  position: absolute;
  background-color: #fff;
  .loading-container {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    display: -webkit-flex; /* Chrome 21+, Safari 6.1+, iOS Safari 7+, Opera 15/16 */
    display: -moz-flex; /* Firefox 18+ */
    display: -ms-flexbox; /* IE 10 */
    display: flex; /* Chrome 29+, Firefox 22+, IE 11+, Opera 12.1/17/18, Android 4.4+ */
    -webkit-box-orient: vertical;
    -ms-flex-direction: column;
    -webkit-flex-direction: column;
    flex-direction: column;
    -webkit-box-align: center;
    -ms-flex-align: center;
    -webkit-align-items: center;
    align-items: center;
    z-index: 1000;
    .loading-image {
      width: 100px;
      height: 100px;
      display: block;
    }
    .loading-text {
      font-size: 14px;
      color: #444;
      text-align: center;
      margin-top: 10px;
      margin-left: 15px;
      letter-spacing: 2px;
    }
  }
}
</style>

<!-- html部分（此處傳入的寬高等都帶px） -->
<common-request-loading v-if="loading"
                        :loadingWidth="rightTableWidth"
                        :loadingWidth="rightTableWidth"
                        :loadingHeight="rightTableHeight"
                        :loadingTop="rightTableTop">
</common-request-loading>