1. 程式人生 > >Vue 封裝的loading組件

Vue 封裝的loading組件

ini return top back -a less ade inf asc

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