首页 > 其他 > 详细

Vue 封装的loading组件

时间:2018-10-15 16:58:13      阅读:275      评论:0      收藏:0      [点我收藏+]
<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组件

原文:https://www.cnblogs.com/minozMin/p/9791905.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!