Vue 封装的loading组件

Posted 2021-01-12 minozmin

<template>
    <div class="loadEffect">
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
        <span></span>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: ‘loading‘
    }
</script>

 

<style lang="less" scoped>
    .loadEffect {
        width: 50px;
        height: 50px;
        position: relative;
        margin: 0 auto;
        
        span {
            display: inline-block;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            background: grey;
            position: absolute;
            -webkit-animation: load 1.04s ease infinite;
        }
        
        @-webkit-keyframes load {
            0% {
                -webkit-transform: scale(1.2);
                opacity: 1;
            }
            100% {
                -webkit-transform: scale(.3);
                opacity: 0.5;
            }
        }
        
        .loadEffect span {
            &: nth-child(1) {
                left: 0;
                top: 50%;
                margin-top: -5px;
                -webkit-animation-delay: 0.13s;
            }
            &: nth-child(2) {
                left: 7px;
                top: 7px;
                -webkit-animation-delay: 0.26s;
            }
            &: nth-child(3) {
                left: 50%;
                top: 0;
                margin-left: -5px;
                -webkit-animation-delay: 0.39s;
            }
            &: nth-child(4) {
                right: 7px;
                top: 7px;
                -webkit-animation-delay: 0.52s;
            }
            &: nth-child(5) {
                right: 0;
                top: 50%;
                margin-top: -5px;
                -webkit-animation-delay: 0.65s;
            }
            &: nth-child(6) {
                right: 7px;
                bottom: 7px;
                -webkit-animation-delay: 0.78s;
            }
            &: nth-child(7) {
                left: 50%;
                bottom: 0;
                margin-left: -5px;
                -webkit-animation-delay: 0.91s;
            }
            &: nth-child(8) {
                left: 7px;
                bottom: 7px;
                -webkit-animation-delay: 1.04s;
            }
        }
    }
</style>

 

以上是loading组件的完整代码，引用方法如下：

<Loading v-if="loading"></Loading>

<script>
    export default {
        data() {
            return {
                loading: false
            }
        },
        methods: {
            //加载方法
            dataLoading(){
                this.loading = true;
                //加载完成后
                this.loading = false;
            }
        }
    }
</script>