一、需求

通过 自定义全局组件 做一个 Loading 组件。

主要的功能:

  • css3 loading 动画
  • 通过 props 控制显示输出

二、Vue 全局自定义组件

vue 全局自定义组件的关键在于 index.js 中的 install 函数。 可以进行 Vue.use

Vue 的组件如果想去 use 使用,都是这么的套路,下图是 elementUI 的单独的一个组件。

1.jpg

代码如下:

import Alert from './src/main';

/* istanbul ignore next */
Alert.install = function(Vue) {
  Vue.component(Alert.name, Alert);
};

export default Alert;

三、打造自己的 Loading 组件

上面的需求中提到了,首先一个 css3 的 loading 效果:

关键:

  • 一个 transition 加一个 fade 效果
  • 通过 v-show 控制 loading 的显示
  • 通过 propsshow 可以由父组件进行控制显示和隐藏

组件需要 index.js 的 install,代码如下:

import LoadingComponent from './Loading.vue';

const Loading = {
    install(Vue){
        Vue.component('loading',LoadingComponent);
    }
}

export default Loading;

vue 组件 Loading.vue 代码如下:

<template>
<transition name="loading">
    <div class="loading-container" v-show="show">
       <div class="spinner">
            <div class="rect1"></div>
            <div class="rect2"></div>
            <div class="rect3"></div>
            <div class="rect4"></div>
            <div class="rect5"></div>
        </div>
    </div>
</transition>
</template>

<script>
export default {
    props:{
            show:Boolean
        }
}
</script>

<style>
*{
    margin:0;
    padding:0;
    box-sizing: border-box;
}
.loading-enter-active,.loading-leave-active{
    transition:all 1s;
}
.loading-enter,.loading-leave-to{
    opacity: 0; 
}
.loading-container{
    position: fixed;
    background-color:rgba(0,0,0,0.4);
    top:0;
    left:0;
    text-align:center;
    width:100%;
    height:100%;
    z-index:999;
}
.spinner {
    position: absolute;
    top:50%;
    left:50%;
    transform: translate(-50%,-50%);
    width: 50px;
    height: 60px;
    text-align: center;
    font-size: 10px;
}
 
.spinner > div {
  background-color: #FF3399;
  height: 100%;
  width: 6px;
  display: inline-block;
   
  -webkit-animation: stretchdelay 1.2s infinite ease-in-out;
  animation: stretchdelay 1.2s infinite ease-in-out;
}
 
.spinner .rect2 {
  -webkit-animation-delay: -1.1s;
  animation-delay: -1.1s;
}
 
.spinner .rect3 {
  -webkit-animation-delay: -1.0s;
  animation-delay: -1.0s;
}
 
.spinner .rect4 {
  -webkit-animation-delay: -0.9s;
  animation-delay: -0.9s;
}
 
.spinner .rect5 {
  -webkit-animation-delay: -0.8s;
  animation-delay: -0.8s;
}
 
@-webkit-keyframes stretchdelay {
  0%, 40%, 100% { -webkit-transform: scaleY(0.4) } 
  20% { -webkit-transform: scaleY(1.0) }
}
 
@keyframes stretchdelay {
  0%, 40%, 100% {
    transform: scaleY(0.4);
    -webkit-transform: scaleY(0.4);
  }  20% {
    transform: scaleY(1.0);
    -webkit-transform: scaleY(1.0);
  }
}
</style>

三、组件的使用

引入组件并且 use:

import Loading from './components/loading';

Vue.use(Loading);

组件中使用:

<loading :show="loading"/>