Vue 封装的loading组件

Posted minozmin

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue 封装的loading组件相关的知识,希望对你有一定的参考价值。

<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>

 

以上是关于Vue 封装的loading组件的主要内容,如果未能解决你的问题,请参考以下文章

VUE2--封装loading组件

Vue 封装的loading组件

vue11----前端优化路由懒加载(异步组件)keep-alivelocalStorage二次封装vue-lazyload图片懒加载mint-ui封装加载loading条axios请求

vue loading 插件编写与实战

vue封装element中table组件

vue自定义全局loading加载组件