前两天产品提出了一个需求，说后台管理系统的左边菜单的名称字数过多，遮挡了。希望能让客户能够看到全部的名称，给左侧菜单增加一个可拖动的功能，经过我的研究，这个功能最终也做出来了，先看效果，双击查看。
下面咱们进入实现步骤
第一步，找到文件。一般的项目中都存在layout的文件夹，找到他的index.vue文件。
第二步，修改template部分。其中在左侧菜单栏的下面新增resize节点。
<template><el-container><!-- 顶部组件 --><el-header> <Header /> </el-header><el-container><!-- 左侧菜单树 --><el-aside id="left-tree"><Menu /><!-- 中间拖动栏 --><div id="resize" class="resize" title="收缩侧边栏">⋮</div></el-aside><el-container direction="vertical" id="right-content"><!-- 导航栏 --><Tabs /><el-main><!-- 内容栏 --><Content /></el-main></el-container></el-container></el-container>
</template>第三步，在script中增加拖动的方法。
function dragControllerDiv() {let left = document.getElementById('left-tree')let line = document.getElementById('resize')let right = document.getElementById('right-content')// 鼠标按下事件line.onmousedown = function (e) {let startX = e.clientXline.left = line.offsetLeft// 鼠标拖动事件document.onmousemove = function (e) {let moveLen = line.left + (e.clientX - startX)if (moveLen >= document.body.clientWidth * 0.1 &&moveLen <= document.body.clientWidth * 0.4) {left.style.width = moveLen + 'px'right.style.width = document.body.clientWidth - moveLen + 'px'}}document.onmouseup = function () {document.onmousemove = nulldocument.onmouseup = null}}
}onMounted(() => {dragControllerDiv()
})
第四步，修改样式。增加拖动样式，其中最主要的是el-side和resize属性的设置。
.el-header {background-color: rgb(31, 44, 81);height: 48px;max-height: 48px;color: #fff;
}
.el-aside {position: relative;height: 100%; // 如果存在box-sizing，此处设置就会用会影响，可以先去掉看看效果background: #001529;vertical-align: top;display: inline-block;box-sizing: border-box;-ms-flex-negative: 0;flex-shrink: 0;width: 210px;overflow: hidden;left: 0;
}
.el-main {background: #f8f8f8;padding: 0;overflow: hidden;
}
.resize {cursor: col-resize;position: absolute;top: 0;right: -8px;background-color: #d6d6d6;border-radius: 5px;width: 10px;height: 100%;background-size: cover;background-position: 50%;font-size: 32px;color: #fff;
}以上就是在后台管理系统中如何进行左侧菜单栏进行左右拖动，拖动后固定到位置，也可以保存在storage中让其他的页面也可以使用。有什么不懂的可以给我发私信，共同进步,共同成长。
