侧边栏左右拖拽放大缩小

前言

点击边框，拖拽左侧侧边栏使左侧变大，而右侧内容区缩小，改怎么实现呢，其实实现方法没有很复杂，接下来给大家看一下效果图，并附上源码，以及实现方法👇👇👇

效果

解决思路

• 首先需要获取到左侧的元素，以及点击拖拽的导航条
• 给拖拽的导航条绑定一个鼠标点击事件和弹起事件
• 给全局绑定一个鼠标移动事件，来监听鼠标的坐标
• 使用offsetWidth获取左侧元素的自身宽度
• 使用event.chientX获取鼠标在窗口上的水平坐标
• 获取左侧元素相对于视口左侧的边界坐标

代码

<template>
    <div class="main">
        <div id="container">
        	左侧内容
			// 点击这个开始拖拽
            <div id="dragBtn"></div>
        </div>
        <div class="right">
            右侧内容
        </div>
    </div>
</template>

<script setup>
		// 获取左侧元素
 		let container = document.getElementById('container');
 		// 获取点击拖拽的元素
        let dragBtn = document.getElementById('dragBtn');
        // 设置变量
        let isDragging = false;
		// 当点击拖拽时变量设为true
        dragBtn.addEventListener('mousedown', function (event) {
            isDragging = true;
        });
		// 当鼠标弹起时变量设为false
        document.addEventListener('mouseup', function (event) {
            isDragging = false;
        });
		// 绑定全局鼠标移动事件
        document.addEventListener('mousemove', function (event) {
        	// 当变量为true是代表拖拽开始执行
            if (isDragging) {
            	// 获取鼠标的坐标-元素距离左侧的像素  变化的像素
                let newWidth = event.clientX - container.getBoundingClientRect().left;
				// 设置最大宽度，当拖拽到250px时吧宽度固定到250px
                if (newWidth > 250) {
                    container.style.width = '250px'
                } else if (newWidth < 150) {
                // 设置最小宽度，当拖拽到150px时吧宽度固定到150px
                    container.style.width = '150px'
                } else {
                	// 在最大和最小宽度的之间的吧值赋给左侧
                    container.style.width = newWidth + 'px';
                }
            }
        });
</script>

<style scoped lang='scss'>
 .main {
      display: flex;
      width: 400px;
        }

        .right {
            width: 200px;
            height: 200px;
            background-color: aqua;
            flex: 1;
            overflow: hidden;

        }

        #container {
            width: 150px;
            height: 200px;
            background-color: lightgray;
            position: relative;
        }

        #dragBtn {
            width: 10px;
            height: 100%;
            background-color: gray;
            position: absolute;
            top: 0;
            right: 0;
            cursor: col-resize;
        }
</style>

欢迎大家留言，一起讨论技术，如果有什么问题可以私信我，看到会回复