Vue 封裝的loading組件

標籤：pos   ESS   scale   100%   data   animation   key   method   play   

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