二、后台管理系统布局菜单可拖动

        前两天产品提出了一个需求，说后台管理系统的左边菜单的名称字数过多，遮挡了。希望能让客户能够看到全部的名称，给左侧菜单增加一个可拖动的功能，经过我的研究，这个功能最终也做出来了，先看效果，双击查看。

 

 

下面咱们进入实现步骤

第一步，找到文件。一般的项目中都存在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中让其他的页面也可以使用。有什么不懂的可以给我发私信，共同进步,共同成长。

 

原文地址：https://blog.csdn.net/qq_43185384/article/details/142878571

免责声明：本站文章内容转载自网络资源，如本站内容侵犯了原著者的合法权益，可联系本站删除。更多内容请关注自学内容网（zxcms.com）！