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- 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 {
   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) {
   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;
   15px;
  height: 15px;
  border-radius: 100%;
  margin: 2px;
   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); } }