<template>
    <div>
        <div style="
        flex: 1;
        display: flex;
        justify-content: space-between;
        overflow: hidden;
      ">
            <div class="cenRoot" ref="cenBox" :style="{ width: cenWidth + 'px' }">
                <div class="resize-handle right" @mousedown.prevent="initDrag('right', $event)"></div>
                <!-- 页卡二  权限页卡 -->
                <div class="root1">
                    <h2>权限</h2>
                </div>
            </div>
            <!-- 页卡三 -->
            <div class="root2" style="position: relative; flex: 1">
                <h2>用户</h2>
            </div>
        </div>
    </div>
</template>
<script>
let startX = 0;
let startWidth = 0;
export default {
    data() {
        return {
            cenWidth:570
        }
    },
    methods: {
        initDrag(side, event) {
            startX = event.clientX;
            startWidth = this.$refs.cenBox
                ? this.$refs.cenBox.offsetWidth
                : 0;
            const doDrag = (e) => {
                let dx = e.clientX - startX;
                if (side === "right") {
                    this.cenWidth = startWidth + dx;
                }
            };
            // 结束拖动时执行的函数
            const stopDrag = () => {
                // 移除鼠标移动和鼠标释放时的事件监听
                document.removeEventListener("mousemove", doDrag);
                document.removeEventListener("mouseup", stopDrag);
            };

            // 添加事件监听器，用于响应鼠标移动和鼠标释放事件
            document.addEventListener("mousemove", doDrag);
            document.addEventListener("mouseup", stopDrag);
        }
    }

}
</script>
<style scoped>
/* 右侧容器 */
.root2 {
    height: 100vh;
    width: 300px;
    border-radius: 16px;
    padding: 8px;
    box-sizing: border-box;
    background-color: white;
    margin-left: 20px;
    margin-right: 5px;
}
/* 左侧容器 */
.root1 {
    width: 100%;
    border-radius: 16px;
    padding: 8px;
    box-sizing: border-box;
}
/* 拖动线 */
.resize-handle {
    position: absolute;
    background: rgba(0, 0, 0, 0);
}

.resize-handle.right {
    top: 0;
    bottom: 0;
    width: 5px;
    cursor: ew-resize;
}

.resize-handle.right {
    right: 0;
}
/* 总容器 */
.cenRoot {
    position: relative;
    /* width: v-bind(cenWidth + "px"); */
    border-radius: 16px;
    padding: 8px;
    box-sizing: border-box;
    background-color: white;
    margin-left: 20px;
    margin-right: 5px;
}
</style>