<template>
    <view>
        <van-transition
            :show="show"
            custom-class="van-overlay"
            :custom-style="'z-index: ' + zIndex + '; ' + customStyle"
            :duration="duration"
            @tap.native="onClick"
            @touchmove.native.stop.prevent="noop"
        >
            <slot></slot>
        </van-transition>
    </view>
</template>

<script>
import { VantComponent } from '../common/component';
export default {
    data() {
        return {};
    },
    props: {
        show: Boolean,
        customStyle: String,
        duration: {
            type: null,
            default: 300
        },
        zIndex: {
            type: Number,
            default: 1
        }
    },
    methods: {
        onClick() {
            this.$emit('click');
        },
        // for prevent touchmove
        noop() {}
    }
};
</script>
<style>
@import '../common/index.ttss';
.van-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    background-color: var(--overlay-background-color, rgba(0, 0, 0, 0.7));
}
</style>
