vue 小细节功能

Loading

1、样式如图：

2、在 src/components/shared 里面新建 Loading.vue 组件，里面添加如下代码：

<template>
  <div class="loading">
    <div><span></span></div>
    <div><span></span></div>
    <div><span></span></div>
  </div>
</template>

<style>
.loading {
     
  width: 60px;
  height: 60px;
  margin: 0 auto;
  margin-top: 100px;
  position: relative;
  -webkit-animation: load 3s linear infinite;
}

.loading div {
     
  width: 100%;
  height: 100%;
  position: absolute;
}

.loading span {
     
  display: inline-block;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #FF6666;
  position: absolute;
  left: 50%;
  margin-top: -10px;
  margin-left: -10px;
  -webkit-animation: changeBgColor 3s ease infinite;
}

@-webkit-keyframes load {
     
  0% {
     
    -webkit-transform: rotate(0deg);
  }
  33.3% {
     
    -webkit-transform: rotate(120deg);
  }
  66.6% {
     
    -webkit-transform: rotate(240deg);
  }
  100% {
     
    -webkit-transform: rotate(360deg);
  }
}

@-webkit-keyframes changeBgColor {
     
  0%, 100% {
     
    background: #99CC66;
  }
  33.3% {
     
    background: #FFFF66;
  }
  66.6% {
     
    background: #FF6666;
  }
}

.loading div:nth-child(2) {
     
  -webkit-transform: rotate(120deg);
}

.loading div:nth-child(3) {
     
  -webkit-transform: rotate(240deg);
}

.loading div:nth-child(2) span {
     
  -webkit-animation-delay: 1s;
}

.loading div:nth-child(3) span {
     
  -webkit-animation-delay: 2s;
}
</style>

3、在 main.js 中，全局注册该组件

.
.
import Loading from "./components/shared/Loading";

Vue.component("Loading", Loading);
.
.

4、在views/Home.vue 中，添加如下代码：

<template>
  <div id="wrapper">
    <Loading v-if="loading"