<template>
    <div class="v-popup-layer" :style="{'z-index':zIndex,'pointer-events':isPass?'none':'all','background-color':bgColor}" @touchmove.prevent @click="onClick">
        <slot></slot>
    </div>
</template>
<script>
import { nextIndex } from "./manager";
export default {
    name: "v-popup-layer",
    props: {
        isPass: Boolean,
        canClose:Boolean,
        bgColor: String,
        zIdx: String,
    },
    data() {
        return {
            zIndex: this.zIdx || nextIndex()
        };
    },
    methods:{
        onClick(){
            this.canClose && this.$emit('close')
        }
    }
};
</script>
<style lang="less" scoped>
.v-popup-layer {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.5);
    overflow: hidden;
    color: #000;
    display: flex;
    align-items: center;
    justify-content: center;
}
</style>