若依系统侧边菜单实现可拖拽宽度

项目中菜单名字过长显示不全，要求实现菜单宽度拖拽。去查了若依官网，作者团队建议直接修改固定宽度，但不符合我们要求。故此有了以下代码：

一、拖拽组件封装

//ResizeBox组件代码
<template>
      <div  ref="resize" class="resize">
        <div ref="resizeHandle" class="handle-resize"></div>
        <slot></slot>
      </div>
  </template>
  <script>
  export default {
    name: 'ResizeBox',
    props: {
      resizeConf: {
        type: Object,
        default: () => ({
          width: 200, // 初始宽度
          widthRange: [200, 500] // 宽度范围
        })
      }
    },
    mounted() {
      console.log(this.resizeConf);
      this.dragControllerDiv(this.$refs.resize, this.$refs.resizeHandle)
    },
    methods: {
      dragControllerDiv: function(resizeBox, resizeHandle) {
        resizeBox.style.width = this.resizeConf.width + 'px'
        // 鼠标按下事件
        resizeHandle.onmousedown = e => {
          const resizeWidth = resizeBox.offsetWidth
          const startX = e.clientX // 水平坐标
          // 鼠标拖动事件
          document.onmousemove = ev => {
            const moveX = ev.clientX
            const moveLen = resizeWidth + (moveX - startX)
            if (this.resizeConf.widthRange[0] <= moveLen && this.resizeConf.widthRange[1] >= moveLen) {
              resizeBox.style.width = moveLen + 'px'
            }
            if(moveLen > this.resizeConf.widthRange[1]) {
              resizeBox.style.width = this.resizeConf.widthRange[1] + 'px'
              this.$emit('changeWidth', moveLen)
            } else if(moveLen < this.resizeConf.widthRange[0]) {
              resizeBox.style.width = this.resizeConf.widthRange[0] + 'px'
              this.$emit('changeWidth', moveLen)
            } else{
              this.$emit('changeWidth', moveLen)
            }
          }
          // 鼠标松开事件
          document.onmouseup = function() {
            document.onmousemove = null
            document.onmouseup = null
          }
        }
      }
    }
  }
  </script>
  <style lang="scss" scoped>
  .resize {
    background: #FFF;
    position: relative;
    word-wrap: break-word;
    .handle-resize {
      cursor: col-resize;
      position: absolute;
      right: -4px;
      width: 6px;
      height: 50px;
      border-left: 2px solid #c5c5c5;
      border-right: 2px solid #c5c5c5;
      top: calc(50% - 25px);
    }
  }
  </style>
   

二、若依布局页应用组件

上面是代码页修改对比图，以下是详细代码：

<template>
  <div :class="classObj" class="app-wrapper" :style="{ '--current-color': theme }">
    <div v-if="device === 'mobile' && sidebar.opened" class="drawer-bg" @click="handleClickOutside"/>
    <ResizeBox v-if="sidebar.opened && !sidebar.hide" ref="ResizeBoxRef" id="ResizeBoxId" :resize-conf="resizeConf" style="height: 100%; position: absolute; z-index: 9;" @changeWidth="changeWidth">
      <sidebarclass="sidebar-container" :style="{width: marginLeft}" />
    </ResizeBox>
    <div v-else>
      <sidebar v-if="!sidebar.hide" class="sidebar-container"/>
    </div>
    <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container" :style="{marginLeft: sidebar.opened ? marginLeft : device === 'mobile' ? '0px':'54px'}">
    <!-- <div :class="{ hasTagsView: needTagsView, sidebarHide: sidebar.hide }" class="main-container"> -->
      <div :class="{ 'fixed-header': fixedHeader }">
        <navbar @setLayout="setLayout" />
        <tags-view v-if="needTagsView" />
      </div>
      <app-main />
      <settings ref="settingRef" />
    </div>
  </div>
</template>

<script setup>
import ResizeBox from './components/ResizeBox.vue'
import { useWindowSize } from '@vueuse/core'
import Sidebar from './components/Sidebar/index.vue'
import { AppMain, Navbar, Settings, TagsView } from './components'
import defaultSettings from '@/settings'

import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'

const marginLeft = ref('200px')
const resizeConf = ref({
  width: 200, // 初始宽度
  widthRange: [200, 400] // 宽度范围
})
  
function changeWidth(width) {
  resizeConf.value.width = width > resizeConf.value.widthRange[1] ? resizeConf.value.widthRange[1]: width < resizeConf.value.widthRange[0] ? resizeConf.value.widthRange[0]:width;
  marginLeft.value = width > resizeConf.value.widthRange[1] ? resizeConf.value.widthRange[1]+'px': width < resizeConf.value.widthRange[0] ? resizeConf.value.widthRange[0]+'px': width+'px'; 
}

const settingsStore = useSettingsStore()
const theme = computed(() => settingsStore.theme);
const sideTheme = computed(() => settingsStore.sideTheme);
const sidebar = computed(() => useAppStore().sidebar);
const device = computed(() => useAppStore().device);
const needTagsView = computed(() => settingsStore.tagsView);
const fixedHeader = computed(() => settingsStore.fixedHeader);

const classObj = computed(() => ({
  hideSidebar: !sidebar.value.opened,
  openSidebar: sidebar.value.opened,
  withoutAnimation: sidebar.value.withoutAnimation,
  mobile: device.value === 'mobile'
}))

const { width, height } = useWindowSize();
const WIDTH = 992; // refer to Bootstrap's responsive design

watchEffect(() => {
  if (device.value === 'mobile' && sidebar.value.opened) {
    useAppStore().closeSideBar({ withoutAnimation: false })
  }
  if (width.value - 1 < WIDTH) {
    useAppStore().toggleDevice('mobile')
    useAppStore().closeSideBar({ withoutAnimation: true })
  } else {
    useAppStore().toggleDevice('desktop')
  }
})

function handleClickOutside() {
  useAppStore().closeSideBar({ withoutAnimation: false })
}

const settingRef = ref(null);
function setLayout() {
  settingRef.value.openSetting();
}
</script>

<style lang="scss" scoped>
  @import "@/assets/styles/mixin.scss";
  @import "@/assets/styles/variables.module.scss";

.app-wrapper {
  @include clearfix;
  position: relative;
  height: 100%;
  width: 100%;

  &.mobile.openSidebar {
    position: fixed;
    top: 0;
  }
}

.drawer-bg {
  background: #000;
  opacity: 0.3;
  width: 100%;
  top: 0;
  height: 100%;
  position: absolute;
  z-index: 999;
}

.fixed-header {
  position: fixed;
  top: 0;
  right: 0;
  z-index: 9;
  width: calc(100% - #{$base-sidebar-width});
  transition: width 0.28s;
}

.hideSidebar .fixed-header {
  width: calc(100% - 54px);
}

.sidebarHide .fixed-header {
  width: 100%;
}

.mobile .fixed-header {
  width: 100%;
}
</style>

注意此处要删除 !important，否则布局页style样式不会生效：