<template>
    <div
        :class="paneClass"
    >
        <span
            class="imgMove"
        />
    </div>
</template>

<script lang="ts" setup>
import { computed } from 'vue'
const props = defineProps({
    split: {
        type: String,
        default: ''
    }
})
let paneClass = computed(() => {
    return `splitter-pane-resizer ${props.split}`
})
</script>

<style lang="scss" scoped>
.splitter-pane-resizer {
    background: transparent;
    height: 100%;
    box-sizing: border-box;
    opacity: 1;
}

.splitter-pane-resizer.horizontal {
    position: absolute;
    right: 0;
    top: 0;
    //float: right;
    width: 3px;
    height: 100%;
    cursor: col-resize;
}

.splitter-pane-resizer.vertical {
    width: 100%;
    height: 3px;
    z-index: 99;
    cursor: row-resize;
}
.imgMove{
    z-index: 1;
    top: -6px;
    pointer-events: none;
    position: relative;
    margin-left: calc((100% - 50px) / 2);
    width: 50px;
}
</style>
