前两天产品提出了一个需求，说后台管理系统的左边菜单的名称字数过多，遮挡了。希望能让客户能够看到全部的名称，给左侧菜单增加一个可拖动的功能，经过我的研究，这个功能最终也做出来了，先看效果，双击查看。
下面咱们进入实现步骤
第一步，找到文件。一般的项目中都存在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.clientX
line.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 = null
document.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中让其他的页面也可以使用。有什么不懂的可以给我发私信，共同进步,共同成长。
