Vuejs自定義全局組件--loading

不管是使用框架，還是不使用任何的框架，我們都不可避免的需要與“加載中……”打交道，剛剛學習了Vuejs自定義組件的寫法，就現學現賣，介紹一下吧！

先看一下目錄結構，一般情況下，每一個組件都新建一個新的文件夾，里面包含對應的vue文件，和Index.js，如下圖：

如果想要像Mint-UI一樣，在任一.vue文件中，僅僅使用一個<loading></loading>標簽即可使用該組件的話，其實也沒有那么的深奧難懂的。

在main.js文件中：

import Loading from "./components/loading/index"
Vue.use(Loading);

　也就兩句代碼解決，一句是ES6語法引入該loading模塊，另一句則是使用use來使用該模塊，　Vue.use(Loading)

　這種全局組件，其實說起來很像jquery中的自定義插件一樣，這里我們所有代碼寫在./components/loading/index.js文件中：

import LoadingComponent from "./Loading.vue";
export default {
  install: function (Vue) {
    Vue.component("loading", LoadingComponent)
  }
}

　　也是兩句代碼，一句引入 "./Loading.vue"， 下一句就是將該組件導出，這里就存在一個關鍵點：install， 只有使用install了，我們在main.js中，才能夠直接use該組件，而install函數默認自帶一個參數Vue，也就是我們正在使用的Vue對象，然后定義loading這一組件，也是正常的Vue定義組件的方法: Vue.component("loading", LoadingComponent)，這里的“loading”的名稱，也就是我們后面使用組件時的標簽名稱。

　　至於該組件長什么樣，有什么效果，直接在Loading.vue文件里面定義就可以了，並不受任何其他文件的影響。

　　從網上扒下來一個loading的動畫效果的示例：　

<template>
  <div class="loader">
    <div class="loader-inner pacman">
      <div></div>
      <div></div>
      <div></div>
      <div></div>
      <div></div>
    </div>
  </div>
</template>　　

.loader {
  box-sizing: border-box;
  display: flex;
  flex: 0 1 auto;
  flex-direction: column;
  flex-grow: 1;
  flex-shrink: 0;
  flex-basis: 25%;
  max-width: 25%;
  height: 200px;
  align-items: center;
  justify-content: center; 
}

.pacman {
  position: relative; 
}
.pacman > div:nth-child(2) {
  -webkit-animation: pacman-balls 1s 0s infinite linear;
          animation: pacman-balls 1s 0s infinite linear; }
.pacman > div:nth-child(3) {
  -webkit-animation: pacman-balls 1s 0.33s infinite linear;
          animation: pacman-balls 1s 0.33s infinite linear; }
.pacman > div:nth-child(4) {
  -webkit-animation: pacman-balls 1s 0.66s infinite linear;
          animation: pacman-balls 1s 0.66s infinite linear; }
.pacman > div:nth-child(5) {
  -webkit-animation: pacman-balls 1s 0.99s infinite linear;
          animation: pacman-balls 1s 0.99s infinite linear; }
.pacman > div:first-of-type {
  width: 0px;
  height: 0px;
  border-right: 25px solid transparent;
  border-top: 25px solid #399;
  border-left: 25px solid #399;
  border-bottom: 25px solid #399;
  border-radius: 25px;
  -webkit-animation: rotate_pacman_half_up 0.5s 0s infinite;
          animation: rotate_pacman_half_up 0.5s 0s infinite; 
  }
.pacman > div:nth-child(2) {
  width: 0px;
  height: 0px;
  border-right: 25px solid transparent;
  border-top: 25px solid #399;
  border-left: 25px solid #399;
  border-bottom: 25px solid #399;
  border-radius: 25px;
  -webkit-animation: rotate_pacman_half_down 0.5s 0s infinite;
          animation: rotate_pacman_half_down 0.5s 0s infinite;
  margin-top: -50px; 
}
.pacman > div:nth-child(3), .pacman > div:nth-child(4), .pacman > div:nth-child(5), .pacman > div:nth-child(6) {
  background-color: #399;
  width: 15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
  width: 10px;
  height: 10px;
  position: absolute;
  -webkit-transform: translate(0, -6.25px);
      -ms-transform: translate(0, -6.25px);
          transform: translate(0, -6.25px);
  top: 25px;
  left: 100px; 
}

@-webkit-keyframes rotate_pacman_half_up {
  0% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg); }

  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); }

  100% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg); } }

@keyframes rotate_pacman_half_up {
  0% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg); }

  50% {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg); }

  100% {
    -webkit-transform: rotate(270deg);
            transform: rotate(270deg); } }

@-webkit-keyframes rotate_pacman_half_down {
  0% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); }

  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); } }

@keyframes rotate_pacman_half_down {
  0% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); }

  50% {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg); }

  100% {
    -webkit-transform: rotate(90deg);
            transform: rotate(90deg); } }

@-webkit-keyframes pacman-balls {
  75% {
    opacity: 0.7; }

  100% {
    -webkit-transform: translate(-100px, -6.25px);
            transform: translate(-100px, -6.25px); } }

@keyframes pacman-balls {
  75% {
    opacity: 0.7; }

  100% {
    -webkit-transform: translate(-100px, -6.25px);
            transform: translate(-100px, -6.25px); } }