/*
 * @Author: hzq
 * @Date: 2018-08-07 09:23:43
 * @Last Modified by: hzq
 * @Last Modified time: 2018-08-13 16:10:18
 * @文件说明:全局加载组件
 * @使用方式：this.$loading({isLoading: false})
 */
<template>
    <div class="f-load">
        <loading :show="isLoading" text="加载中"></loading>
    </div>
</template>

<script>
    import {Loading, TransferDomDirective as TransferDom} from 'vux';
    export default {
        name: 'f-load',
        directives: {TransferDom},
        components: {Loading},
        computed: {
            isLoading() {
                return this.$store.state.isLoading;
            }
        }
    };
</script>

<style lang="less" scoped>
    .f-load {
        & /deep/ .weui-toast {
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            width: 84px;
            height: 84px;
            min-height: 84px;
            .weui-loading {
                width: 28px;
                height: 28px;
                margin: 0;
            }
            .weui-toast__content {
                position: relative;
                top: 7px;
                margin: 0;
                font-size: @font-size-small;
            }
        }
    }
</style>