<template>
    <view :class="'u-loading a-fade-in-down ' + (grey ? 'f-grey' : '')" v-if="!hidden">
        <view class="ul-wrap">
            <view class="ul-bar ul-bar-1"></view>
            <view class="ul-bar ul-bar-2"></view>
        </view>
    </view>
</template>

<script>
'use strict';
export default {
    data() {
        return {
            hidden: true
        };
    },
    props: {
        grey: {
            type: Boolean,
            default: false
        },
        showed: {
            type: Boolean,
            default: false
        }
    },
    didUpdate: {
        showed: function (val) {
            this.setData({
                hidden: !val
            });
        }
    },
    methods: {
        show: function () {
            console.log('show');
            this.setData({
                hidden: false
            });
        },
        hide: function () {
            this.setData({
                hidden: true
            });
        }
    },
    created: function () {}
};
</script>
<style>
@import '/data/acss/u-loading.css';
</style>
