vue实现动态获取左侧导航宽度，右侧内容动态改变margin值

vue实现动态获取左侧导航宽度，右侧内容动态改变margin值

正常情况下，左侧菜单全部收起来，给个固定宽度即可（子菜单一般不会很多的）

问题：子菜单全部展开的时候 右边内容会被遮挡一部分，不会随着左边菜单的宽度自动改变margin-left值

目前需求：有个菜单是全部文件，下面展示的是所有的文件夹包括文档（会有很多层）

想法：左边菜单宽度变化的时候可以动态的获取宽度，然后设置右边内容的margin-left

想要实现的效果大概是这个样子的：左边菜单我用了el-menu嵌套el-tree**

目前实现的效果：（因为项目是重构，从一点一点写的，所以先写了一点结构样式出来）
用的是vue2的框架，框架模板在vue2框架模板

添加自定义指令，在左边菜单被撑开的时候动态获取到宽度

注意：directives要跟钩子函数同级，有计算属性的话要写在计算属性的前面，我是直接在菜单页中写看了（layout/components/Sidebar/index.vue）

 // 监听左侧菜单自动被撑开时宽度变化directives: {resize: {// 指令的名称bind(el, binding) {// el为绑定的元素，binding为绑定给指令的对象console.log(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) {console.log(el, "解绑");clearInterval(el.__vueSetInterval__);},},},

methods中的方法动态给右侧内容赋值margin-left

methods: {MuneResize(data) {// 拿到左侧菜单父元素const leftDom = document.getElementById(`${data.targetId}`);// 拿到右侧内容父元素const mainContainer =document.getElementsByClassName("main-container")[0];mainContainer.style.marginLeft = leftDom.clientWidth + "px";},},

最后在左侧菜单父元素上使用自定义指令

实现效果：右侧内容的margin-left值会根据左侧菜单的宽度自动改变