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__);
      },
    },
  },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

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";
    },
  },
1
2
3
4
5
6
7
8
9
10

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

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