vue2实现可拖拽菜单栏，及根据菜单内容自动扩展宽度

分为两个功能
基本的html:

<el-scrollbarid="leftmenu"v-resize="MuneResize"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-itemv-for="route in routes":key="route.path":item="route":base-path="route.path"/></el-menu></el-scrollbar><!-- 给个可以拖拽的标识 --><div id="drap-meuline" />

可拖拽菜单

拖拽的块儿为
<div id="drap-meuline" />
可以自行调整宽度和样式

mounted() {// 获取dom，对左菜单进行拖拽var drapLine = document.getElementById("drap-meuline");// 获取右侧内容Domvar mainContainer = document.getElementsByClassName("main-container")[0];// 获取左侧菜单Domvar menuleft = document.getElementById("leftmenu");// 获取左侧菜单Dom父元素，为了动态设置宽度var sidebarWidth = document.getElementsByClassName("sidebar-container")[0];// 是否需要本地保存// const history_width = localStorage.getItem("sliderWidth");// if (history_width) {//   sidebarWidth.style.width = history_width;//   mainContainer.style.marginLeft = history_width;// }drapLine.onmousedown = function (e) {// 设置最大/最小宽度var max_width = 600;var min_width = 210;let mouse_x = 0; // 记录鼠标相对left盒子x轴位置e.preventDefault(); // 阻止默认事件const _e = e || window.event;mouse_x = _e.clientX - menuleft.offsetWidth;document.onmousemove = function (e_) {console.log(min_width, max_width);const _e_ = e_ || window.event;let left_width = _e_.clientX - mouse_x;left_width = left_width < min_width ? min_width : left_width;left_width = left_width > max_width ? max_width : left_width;sidebarWidth.style.width = left_width + "px";mainContainer.style.marginLeft = left_width + "px";};document.onmouseup = function (e) {document.onmousemove = null;document.onmouseup = null;// 本地保存// localStorage.setItem("sliderWidth", menuleft.style.width);};};},//拖拽宽度的改变
methods：{// 动态获取左侧菜单的宽度MuneResize(data) {// 拿到左侧菜单父元素const leftDom = document.getElementById(`${data.targetId}`);// 拿到右侧内容父元素const mainContainer =document.getElementsByClassName("main-container")[0];mainContainer.style.marginLeft = leftDom.clientWidth + "px";},
}

根据菜单内容自动撑开宽度

// 自定义指令 获取当前菜单的宽度directives: {resize: {// 指令的名称bind(el, binding) {// el为绑定的元素，binding为绑定给指令的对象let _width = "";function isReize() {const style = document.defaultView.getComputedStyle(el);if (_width !== style.width) {binding.value({ width: style.width, targetId: el.id });_width = style.width;}}el.__vueSetInterval__ = setInterval(isReize, 300);},unbind(el) {clearInterval(el.__vueSetInterval__);},},},
...其他methods

样式：

#app .sidebar-container {display: flex;
}
#drap-meuline {background: transparent;width: 4px;cursor: e-resize; //设置鼠标悬浮上去显示可拖拽样式
}