vue动画-自定义组件

在开发时，有时候一些组件满足不了目前的需求，这时候就需要自己开发组件了，然后使用自己开发的组件（插件）到项目中，组件的引用方式有两种，一种是import,另一种是vue.use()，element-ui在引用时就要

import ElementUI from 'element-ui'
vue.use(ElementUI);

而引用axios时只需要

import axios from 'axios'

他们的不同是因为axios里面并没有写install方法，而element-ui就有写这个方法，下面就利用这个install来写一个自己的插件。 使用时跟elementUI用法一样，只需要在页面中写自定义插件的标签即可。

一.目录结构

首先在component中新建loading文件夹，在loading下新建loading.js和loading.vue，目录结构如下：

二.组件的开发（原代码）

其中，loading.js中代码如下：

import LoadingComponent from './Loading.vue'

const Loading={
    install:function (Vue) {
        Vue.component('Loading',LoadingComponent)
    }
}
export default Loading 

loading.vue中代码如下：

<template>
<div id="zstax-bg" v-if="stop">
    <div class="loader" id="zstax-Loading" v-if="stop">
        <div class="loader-inner ball-spin-fade-loader"  ref="zstaxLoading">
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </div>
    
</div>
</template>
<script> 
  export default { 
      props:{ //接收从父组件
        stop:{ //数据格式
            type:Boolean,
            required:true,
            default:true,
        }, 
    },
    data() {
      return { 
      }
    },  
    methods: { 
        
    },


    mounted() {
      var windowHeight = document.documentElement.clientHeight || document.body.clientHeight; 
      document.getElementById('zstax-Loading').style.margin = `${(windowHeight-80)/2}px auto`; //'1000px'; 
    },
    created() { 
        
    }
  }

</script>

<style scoped>
    #zstax-bg{ 
        position: fixed;
        top:0;
        left: 0;
        width:100%;    
        height:100%;    
        background: rgba(4, 4, 4, 0.7);
        z-index:99999;

    }
    .loader{
        width:80px;
        height: 80px;
        /* margin:50px auto; */
    }
    @keyframes ball-spin-fade-loader {
        50% {
            opacity: 0.3;
            -webkit-transform: scale(0.4);
            transform: scale(0.4); }

        100% {
            opacity: 1;
            -webkit-transform: scale(1);
            transform: scale(1); } }

    .ball-spin-fade-loader {
        position: relative; }
    .ball-spin-fade-loader > div:nth-child(1) {
        top: 25px;
        left: 0;
        -webkit-animation: ball-spin-fade-loader 1s 0s infinite linear;
        animation: ball-spin-fade-loader 1s 0s infinite linear; }
    .ball-spin-fade-loader > div:nth-child(2) {
        top: 17.04545px;
        left: 17.04545px;
        -webkit-animation: ball-spin-fade-loader 1s 0.12s infinite linear;
        animation: ball-spin-fade-loader 1s 0.12s infinite linear; }
    .ball-spin-fade-loader > div:nth-child(3) {
        top: 0;
        left: 25px;
        -webkit-animation: ball-spin-fade-loader 1s 0.24s infinite linear;
        animation: ball-spin-fade-loader 1s 0.24s infinite linear; }
    .ball-spin-fade-loader > div:nth-child(4) {
        top: -17.04545px;
        left: 17.04545px;
        -webkit-animation: ball-spin-fade-loader 1s 0.36s infinite linear;
        animation: ball-spin-fade-loader 1s 0.36s infinite linear; }
    .ball-spin-fade-loader > div:nth-child(5) {
        top: -25px;
        left: 0;
        -webkit-animation: ball-spin-fade-loader 1s 0.48s infinite linear;
        animation: ball-spin-fade-loader 1s 0.48s infinite linear; }
    .ball-spin-fade-loader > div:nth-child(6) {
        top: -17.04545px;
        left: -17.04545px;
        -webkit-animation: ball-spin-fade-loader 1s 0.6s infinite linear;
        animation: ball-spin-fade-loader 1s 0.6s infinite linear; }
    .ball-spin-fade-loader > div:nth-child(7) {
        top: 0;
        left: -25px;
        -webkit-animation: ball-spin-fade-loader 1s 0.72s infinite linear;
        animation: ball-spin-fade-loader 1s 0.72s infinite linear; }
    .ball-spin-fade-loader > div:nth-child(8) {
        top: 17.04545px;
        left: -17.04545px;
        -webkit-animation: ball-spin-fade-loader 1s 0.84s infinite linear;
        animation: ball-spin-fade-loader 1s 0.84s infinite linear; }
    .ball-spin-fade-loader > div {
        background-color: #399;
        width: 15px;
        height: 15px;
        border-radius: 100%;
        margin: 2px;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        position: absolute; }
</style> 

三 .组件的使用

文章开头已经提到过，只需要直接在.vue文件中添加标签即可。
在其他页面中使用loading组件：

<Loading :stop="LoadingShow"></Loading>

data中定义变量并为其赋初始值：
LoadingShow: false, //自定义组件-loading
如图：
在父组件中通过改变LoadingShow的值来控制加载动画是否显示，在您需要的地方动态的控制动画的显示与隐藏，如图：

四.页面效果

有加载动画的效果（如请求数据时）如下：

无加载动画的效果（也就是数据加载完成后）如下：

本文部分内容学习于：
https://blog.csdn.net/Tank_in_the_street/article/details/73135410
大家可以去看看哦~

若您需要引用、转载，请注明来源及原文链接哦~ (^▽)。