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); } }