<!-- 正在加载组件 -->
<template>
    <div :class="classes">
        <img :class="iconClasses" src='~imgPath/common/loading.gif'>
        <div class="">
            {{ tip_txt || '数据加载中' }}
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            tip_txt: {
                default: '数据加载中'
            },
            size: {
                validator (value) {
                    let validList = ['default', 'small'];

                    for (let i = 0; i < validList.length; i++) {
                        if (value === validList[i]) {
                            return true;
                        }
                    }

                    return false;
                },
                default: 'default'
            }
        },
        computed: {
            classes () {
                return [
                    'loading-box',
                    't2',
                    'c3',
                    {
                        [`loading-box-${this.size}`]: this.size !== 'default'
                    }
                ];
            },
            iconClasses () {
                return [
                    'loading-icon',
                    {
                        [`loading-icon-${this.size}`]: this.size !== 'default'
                    }
                ];
            }
        }
    };
</script>

<style scoped>

    /*正在加载样式*/
    .loading-box {
        font-size: .26rem;
        position: absolute;
        top: 50%;
        left: 50%;
        margin: auto;
        background: rgba(0,0,0,.7);
        color: #fff;
        transform: translate(-50%, -50%);
        z-index: 100000;
        border-radius: .1rem;
        white-space: nowrap;
        max-width: 6rem;
        overflow: hidden;
        text-overflow: ellipsis;
        text-align: center;
        padding-top: .73rem;
        height: 2.4rem;
        width: 2.4rem;
        box-sizing: border-box;
    }

    .loading-box-small {
        width: 1.6rem;
        height: 1.6rem;
        padding-top: .3rem;
    }

    /*加载图标*/
    .loading-icon {
        width: .6rem;
        height: .6rem;
        margin-bottom: .3rem;
        /*animation: loadingRotate 3s infinite;
        -webkit-animation:loadingRotate 3s infinite;
        animation-timing-function: linear;
        -webkit-animation-timing-function: linear;*/
    }

    .loading-icon-small {
        margin-bottom: .1rem;
    }

    /*加载中旋转动画*/
    @-webkit-keyframes loadingRotate {
        from {
            transform: rotate(0);
        }
        to {
            transform: rotate(360deg);
        }
    }

    @keyframes loadingRotate {
        from {
            transform: rotate(0);
        }
        to {
            transform: rotate(360deg);
        }
    }

</style>
