O Vue implementa a aquisição dinâmica da largura da navegação à esquerda e altera dinamicamente o valor da margem do conteúdo à direita

O Vue implementa a aquisição dinâmica da largura da navegação à esquerda e altera dinamicamente o valor da margem do conteúdo à direita

Em circunstâncias normais, todos os menus à esquerda são fechados e uma largura fixa é suficiente (geralmente não há muitos submenus)

Problema: quando o submenu estiver totalmente expandido, o conteúdo à direita será parcialmente coberto e o valor da margem esquerda não será alterado automaticamente com a largura do menu esquerdo

Requisitos atuais: Existe um menu para todos os arquivos e o seguinte mostra todas as pastas, incluindo documentos (haverá muitas camadas)

Ideia: quando a largura do menu esquerdo muda, você pode obter a largura dinamicamente e, em seguida, definir a margem esquerda do conteúdo direito

O efeito que quero alcançar é provavelmente assim: usei el-menu para aninhar el-tree** para o menu esquerdo

O efeito atual: (Como o projeto é refatorado e escrito de ponto a ponto, então escrevi um pouco de estilo estrutural primeiro) A
estrutura vue2 é usada e o modelo da estrutura está no modelo da estrutura vue2

Adicione um comando personalizado para obter dinamicamente a largura quando o menu esquerdo for expandido

Nota: as diretivas devem estar no mesmo nível da função de gancho. Se houver propriedades calculadas, elas devem ser escritas na frente das propriedades calculadas. Escrevi diretamente na página do menu (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__);
      },
    },
  },

O método em métodos atribui dinamicamente a margem esquerda ao conteúdo à direita

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

Por fim, use instruções personalizadas no elemento pai do menu esquerdo

para obter o efeito: o valor da margem esquerda do conteúdo à direita mudará automaticamente de acordo com a largura do menu esquerdo