<template>
    <transition name="hanzo-fade">
        <div
            v-show="visible"
            :style="style"
            :class="[classes(), className]"
            @touchmove="preventTouchMove"
            @click="handleClick"
        >
        </div>
    </transition>
</template>
<script>
import { classesMixin } from '../../common/mixins/classname';
let classMixin = classesMixin('overlay');
export default {
    name: 'h-overlay',
    mixins: [classMixin],
    props: {
        zIndex: Number,
        visible: Boolean,
        className: [String, Object],
        customStyle: Object,
    },
    computed: {
        style() {
            return { zIndex: this.zIndex, ...this.customStyle };
        }
    },
    methods: {
        preventTouchMove(event) {
            event.preventDefault();
            event.stopPropagation();
        },
        handleClick( event ) {
            this.$emit( 'click', event );
        }
    }
}
</script>
<style lang="less" scoped>
@import './index.less';
</style>
