<template>
    <layer :class="[$style.loading,$style.layer]" :style="{visibility:layer?'visible':''}" v-bind="$attrs">
        <div :class="$style.box">
            <slot>正在加载...</slot>
        </div>
    </layer>
</template>

<style module>
    .loading.layer {
        position: absolute;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        visibility: hidden;
    }

    .box {
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        visibility: visible;
    }
</style>

<script>
    import Layer from '../layer/index.vue'

    export default {
      inheritAttrs: false,
      props: {
        layer: { // 是否显示遮罩层
          type: Boolean,
          default: false
        }
      },
      computed: {
        $style () {
          return this.$options.cssModules
        }
      },
      components: {
        Layer
      },
      mounted () {
        // 将父元素设置成相对定位
        this.$el.parentElement.style.position = 'relative'
      }
    }
</script>