vue项目 - 封装loding组件

一、需求问题
在vue项目中，当在页面内容进行加载的时候，会进行请求数据，然后显示页面。在这个等待的过程中，会出现一段时间的白屏，我们可以通过加一个loading的效果，进行过渡，然后显示页面。

<template>
<div>
  <!--没数据则 加载动画 -->
	<comloading v-if="watchflag"></comloading>
  	<!--有数据则显示 设置样式 -->
	<div v-if="!watchflag">
   		<div v-for="(item, index) in list1" class="item" :key="index">
  		</div>
	</div>
</div>
</template>
<script>
import comloading from '@/components/comloading.vue'
export default {
   props:["list1"],
   data() {
      return {
        watchflag: true,
      }
  },
  components: {
      comloading
  },
  watch: {
     list1: function() {
     	this.watchflag = false;
     } //list1为数据
  }
}
</script>

设置comloading.vue 文件

第一种 为动图

// loading 加载动画。循环数据显示
<template>
    <div class="box">
        <div class="out-box"></div>
        <div class="inner-box"></div>
        <div class="text-box">正在加载</div>
    </div>
</template>
<style lang="scss" scoped>
.box {
    width: 100%;
    position: fixed;
    top: 50px;
    left: 0;
    bottom: 50px;
    background-color: #fdfaf5;
}
.out-box {
    width: 150px;
    height: 150px;
    border-top: 4px solid #e0787f;
    border-right: 4px solid #e0787f;
    border-bottom: 4px solid #f0f0f0;
    border-left: 4px solid #f0f0f0;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -75px;
    margin-top: -75px;
    animation: 2.5s ease-in-out 0s normal none infinite rotateTwo;
    -webkit-animation: 2.5s ease-in-out 0s normal none infinite rotateTwo;
}
.inner-box {
    width: 130px;
    height: 130px;
    border-bottom: 2px solid #99749d;
    border-top: 2px solid #f0f0f0;
    border-right: 2px solid #f0f0f0;
    border-left: 2px solid #99749d;
    border-radius: 100%;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -65px;
    margin-top: -65px;
    animation: 2.5s linear 0s normal none infinite rotate;
    -webkit-animation: 2.5s linear 0s normal none infinite rotate;
}
.text-box {
    width: 120px;
    height: 120px;
    position: absolute;
    left: 50%;
    top: 50%;
    margin-left: -60px;
    margin-top: -60px;
    color: #cccccc;
    font-size: 24px;
    line-height: 120px;
    text-align: center;
    animation: 4s linear 0s normal none infinite flash;
    -webkit-animation: 4s linear 0s normal none infinite flash;
}
@-webkit-keyframes rotate {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(360deg);
    }
}
@keyframes rotate {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(360deg);
    }
}
@-webkit-keyframes rotateTwo {
    from {
        -webkit-transform: rotate(0deg);
    }
    to {
        -webkit-transform: rotate(-360deg);
    }
}
@keyframes rotateTwo {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(-360deg);
    }
}
@-webkit-keyframes flash {
    from,
    50%,
    to {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}
@keyframes flash {
    from,
    50%,
    to {
        opacity: 1;
    }
    25%,
    75% {
        opacity: 0;
    }
}
</style>

第二种 为动图

<template>
    <div class="loader"></div>
</template>
<script>
export default {
    name: 'Loading'
}
</script>

<style lang="scss" scoped>
$colors:
  hsla(337, 84, 48, 0.75)
  hsla(160, 50, 48, 0.75)
  hsla(190, 61, 65, 0.75)
  hsla( 41, 82, 52, 0.75);
$size: 2.5em;
$thickness: 0.5em;
// Calculated variables.
$lat: ($size - $thickness) / 2;
$offset: $lat - $thickness;
.loader {
  position: relative;
  width: $size;
  height: $size;
  transform: rotate(165deg);
  &:before,
  &:after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    display: block;
    width: $thickness;
    height: $thickness;
    border-radius: $thickness / 2;
    transform: translate(-50%, -50%);
  }
  &:before {
    animation: before 2s infinite;
  }
  &:after {
    animation: after 2s infinite;
  }
}
@keyframes before {
  0% {
    width: $thickness;
    box-shadow:
      $lat (-$offset) nth($colors, 1),
      (-$lat) $offset nth($colors, 3);
  }
  35% {
    width: $size;
    box-shadow:
      0 (-$offset) nth($colors, 1),
      0   $offset  nth($colors, 3);
  }
  70% {
    width: $thickness;
    box-shadow:
      (-$lat) (-$offset) nth($colors, 1),
      $lat $offset nth($colors, 3);
  }
  100% {
    box-shadow:
      $lat (-$offset) nth($colors, 1),
      (-$lat) $offset nth($colors, 3);
  }
}
@keyframes after {
  0% {
    height: $thickness;
    box-shadow:
      $offset $lat nth($colors, 2),
      (-$offset) (-$lat) nth($colors, 4);
  }
  35% {
    height: $size;
    box-shadow:
        $offset  0 nth($colors, 2),
      (-$offset) 0 nth($colors, 4);
  }
  70% {
    height: $thickness;
    box-shadow:
      $offset (-$lat) nth($colors, 2),
      (-$offset) $lat nth($colors, 4);
  }
  100% {
    box-shadow:
      $offset $lat nth($colors, 2),
      (-$offset) (-$lat) nth($colors, 4);
  }
}
html,
body {
  height: 100%;
}
.loader {
  position: absolute;
  top: calc(50% - #{$size / 2});
  left: calc(50% - #{$size / 2});
}
</style>

第三种 为动图

<template>
    <transition name="fade">
        <section>
            <div class="loading">
                <!-- <img width="24px" height="24px" src="../images/timg.gif">
                <p class="desc">{{title}}</p> -->
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
                    <span></span>
            </div>
        </section>
    </transition>
</template>
<script>
export default {
  props: {
    title: {
      type: String,
      default: '正在载入...'
    }
  }
}
</script>
<style scoped lang="css">
.fade-enter-active, .fade-leave-active {
  transition: opacity .5s;
}
.fade-enter, .fade-leave-to /* .fade-leave-active below version 2.1.8 */ {
  opacity: 0;
}
section {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 999;
    display: flex;
    align-items: center;
    justify-content: center;
}
.loading {
    width: 100%;
    text-align: center;
    /* flex-direction: column; */
}
.loading span{
    display: inline-block;
    width: 8px;
    height: 100%;
    border-radius: 4px;
    background: lightgreen;
    -webkit-animation: load 1s ease infinite;
    margin-left: 5px;
}
@-webkit-keyframes load{
    0%,100%{
        height: 40px;
        background: lightgreen;
    }
    50%{
        height: 70px;
        margin: -15px 0;
        background: lightblue;
    }
}
.loading span:nth-child(2){
    -webkit-animation-delay:0.2s;
}
.loading span:nth-child(3){
    -webkit-animation-delay:0.4s;
}
.loading span:nth-child(4){
    -webkit-animation-delay:0.6s;
}
.loading span:nth-child(5){
    -webkit-animation-delay:0.8s;
}
</style>