<template>
    <div class="drawer" :class="{'drawer-open': on }" v-show="on">
        <div class="drawer-main" v-el:main>
            <slot></slot>
        </div>
        <div class="drawer-mask" @click="close"></div>
    </div>
</template>
<script>
    module.exports = {
        props: {
            on: Boolean
        },
        methods: {
            close() {
                this.on = false;
            }
        },
        watch: {
            on(newVal) {
                if(newVal) {
                    document.body.style.overflow = 'hidden';
                } else {
                    document.body.style.overflow = '';
                }
            }
        }
    };

</script>
<style>
    .drawer {
        position: fixed;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
    }

    .drawer-mask {
        position: absolute;
        z-index: 199;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background-color: rgba(0, 0, 0, 0.6);
    }
    
    .drawer-main {
        position: absolute;
        z-index: 200;
        top: 0;
        right: 0%;
        bottom: 0;
        min-width: 80%;
        max-width: 100%;
        background-color: #fff;
        transition: all 0.3s 0.2s;
    }

</style>