vue-element-admin 左侧菜单增加可拉伸收缩

有时候左侧菜单项名称太长导致会出现滚动条或者不用滚动条，直接加title.,体验不太好，想增加一个手动拖动拉伸收收缩的功能

slidebar增加拖拽点

增加id 为split-panel的布局。且设置isCollapse为true的时候，即只有打开的时候才可以进行拖拽

split-panel样式：

#split-panel {
  cursor: col-resize;
  height: 100%;
  width: 5px;
  position: absolute;
  top: 0;
  right: 0;
}

增加split-panel：

<template>
  <div :class="{ 'has-logo': showLogo }">
    <logo v-if="showLogo" :collapse="isCollapse" />
    <el-scrollbar wrap-class="scrollbar-wrapper">
      <el-menu
        :default-active="activeMenu"
        :collapse="isCollapse"
        :background-color="variables.menuBg"
        :text-color="variables.menuText"
        :unique-opened="false"
        :active-text-color="variables.menuActiveText"
        :collapse-transition="false"
        mode="vertical"
      >
        <sidebar-item
          v-for="route in permission_routes"
          :key="route.path"
          :item="route"
          :base-path="route.path"
        />
      </el-menu>
    </el-scrollbar>
     <!-- 拖拽点 -->
    <div v-show="!isCollapse" id="split-panel"></div>
  </div>
</template>

增加动态style

<sidebar class="sidebar-container" :style="{ width: barWidth }" />

<div
      :class="[hasTagsView ? 'hasTagsView' : 'noTagsView']"
      class="main-container"
      :style="{ 'margin-left': barWidth }"
    >
      // app-main...省略
    </div>

增加计算属性barWidth

computed:{
	barWidth() {
      if (!this.sidebar.opened) {
        //关闭时，右侧内容主题left设置为默认的54
        return '54px'
      } else {
        return `${this.sideBarDefaultWidth}px`
      }
    }
}

监听拖拽点

 moveSlideBar: function() {
      let _this = this
      let splitPanel = document.getElementById('split-panel')
      splitPanel.onmousedown = function(e) {
        splitPanel.style.background = '#409eff'
        let startX = e.clientX
        document.onmousemove = function(e) {
          let endX = e.clientX
          let moveLen = startX - endX
          startX = endX
          // 设置拖动幅度
          _this.sideBarDefaultWidth -= moveLen
        }
        document.onmouseup = function() {
          // 重置slipte
          splitPanel.style.background = ''
          document.onmousemove = null
          document.onmouseup = null
        }
        return false
      }
    }

千里之行
始于足下