Material Web Components持久化抽屉与Hero区块Vue挂载适配问题

我来帮你搞定这个MWC的布局难题，你遇到的两个问题（抽屉打不开、Hero和Toolbar间距/抽屉覆盖Hero）其实都是DOM初始化时机和布局结构不符合MWC规范导致的，咱们一步步来修复：

1. 先解决抽屉打不开的问题 #

当你用#app包裹整个页面后，Vue会在挂载时才把内部的DOM渲染出来。如果你的MDCDrawer初始化代码是在Vue挂载前执行的，那肯定找不到抽屉元素，自然打不开。

正确的初始化方式（Vue环境下） #

在Vue组件的mounted钩子中初始化抽屉，这时候DOM已经完全渲染好了：

export default {
  mounted() {
    // 获取抽屉和菜单按钮元素
    const drawer = new mdc.drawer.MDCDrawer(document.querySelector('.mdc-drawer'));
    const menuIcon = document.querySelector('.mdc-toolbar__menu-icon');
    
    // 绑定菜单点击事件，切换抽屉状态
    menuIcon.addEventListener('click', () => {
      drawer.open = !drawer.open;
    });
  }
}

如果你习惯用Vue的ref（更符合Vue的开发方式），可以给抽屉和菜单按钮加ref：

<aside ref="drawer" class="mdc-drawer mdc-drawer--persistent mdc-typography">
  <!-- 抽屉内容 -->
</aside>
<!-- 菜单按钮 -->
<a ref="menuIcon" href="#" class="material-icons mdc-toolbar__menu-icon">menu</a>

然后在mounted里初始化：

export default {
  mounted() {
    this.drawer = new mdc.drawer.MDCDrawer(this.$refs.drawer);
    this.$refs.menuIcon.addEventListener('click', () => {
      this.drawer.open = !this.drawer.open;
    });
  }
}

2. 调整布局，让Hero紧贴Toolbar且抽屉正常显示 #

MWC的persistent抽屉需要特定的布局结构：抽屉和主内容区要放在同一个Flex容器里，同时主内容区需要加上mdc-drawer-app-content类，用来自动处理抽屉打开时的偏移。

步骤1：修改容器CSS #

给#app设置Flex布局，让它占据整个视口高度：

#app {
  display: flex;
  min-height: 100vh;
}

步骤2：调整主内容区结构 #

把Toolbar和Hero所在的内容包裹在mdc-drawer-app-content容器里，这样抽屉打开时，主内容区会自动留出左侧空间：

<div id="app">
  <!-- 抽屉 -->
  <aside class="mdc-drawer mdc-drawer--persistent mdc-typography">...</aside>
  
  <!-- 主内容区 -->
  <div class="mdc-drawer-app-content">
    <header class="mdc-toolbar mdc-toolbar--fixed demo-toolbar">...</header>
    <div class="page-content">
      <div class="landing-page-hero">...</div>
    </div>
  </div>
</div>

步骤3：修复Hero和Toolbar的间距 #

因为Toolbar是mdc-toolbar--fixed固定定位的，主内容区需要设置padding-top来避免内容被Toolbar遮挡，同时去掉Hero的width:100vw（否则会忽略抽屉宽度导致溢出）：

/* 主内容区 */
.page-content {
  flex-grow: 1;
  padding-top: 64px; /* MWC固定Toolbar的默认高度是64px，根据你的需求调整 */
  box-sizing: border-box;
}

/* Hero区块 */
.landing-page-hero {
  min-height: 400px;
  height: 45vh;
  background-image: url('/img/hero-image.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: 90% 60%;
  display: flex;
  align-items: center;
  color: white; /* 如果用Sass变量$white，确保已定义 */
}

最终效果 #

搞定这些之后：

• 抽屉会在Vue挂载后正确初始化，点击菜单按钮可以正常开关
• Hero区块会完美紧贴Toolbar下方，没有多余间距
• 抽屉打开时，主内容区（包括Hero）会自动向右偏移，不会和抽屉重叠
• 整个页面布局在各种屏幕尺寸下都能保持正常

内容的提问来源于stack exchange，提问作者Leff