材质组件菜单的 `setAbsolutePosition()` 无法正常工作？答案

【问题标题】：Material Components menu's `setAbsolutePosition()` not working properly?材质组件菜单的 `setAbsolutePosition()` 无法正常工作？
【发布时间】：2019-04-27 17:24:33
【问题描述】：

我正在尝试使用MDCMenu's docs 中的menu.setAbsolutePosition(0, 100); 方法，将“mdc-menu”相对（波纹管）定位到我的顶栏上的溢出按钮，但它似乎没有做太多（实际上使元素卡在屏幕外），无论我设置什么值。

我创建了一个说明问题的 sn-p：

<link rel="stylesheet" type="text/css" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
<script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">

<header class="mdc-top-app-bar">
  <div class="mdc-top-app-bar__row">
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
      <a href="#" class="material-icons mdc-top-app-bar__navigation-icon">menu</a>
      <span class="mdc-top-app-bar__title">Title</span>
    </section>
    <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
      <div id="demo-menu" class="mdc-menu-surface--anchor">
        <a href="#" class="material-icons mdc-top-app-bar__action-item" aria-label="More" alt="More">more_vert</a>
        <div class="mdc-menu mdc-menu-surface">
          <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical">
            <li class="mdc-list-item" role="menuitem">
              <span class="mdc-list-item__text">A Menu Item</span>
            </li>
          </ul>
        </div>
      </div>
    </section>
  </div>
</header>

<script>
  var MDCMenu = mdc.menu.MDCMenu.attachTo(document.querySelector('.mdc-menu'));
  MDCMenu.open = true;
  // MDCMenu.hoistMenuToBody(); 
  MDCMenu.setAbsolutePosition(0, 100);
</script>

【问题讨论】：

标签： drop-down-menu material-design absolute material-components-web mdc-components

【解决方案1】：

您通过将MDC menu 包装在mdc-menu-surface--anchor 中来覆盖setAbsolutePosition。以下示例移除了锚元素，以便您可以使用setAbsolutePosition。

const bar = mdc.topAppBar.MDCTopAppBar.attachTo(document.querySelector('.mdc-top-app-bar'));
const menu = mdc.menu.MDCMenu.attachTo(document.querySelector('.mdc-menu'));
menu.setAbsolutePosition(0, 100);
menu.open = true;

document.querySelector('#menu-button').addEventListener('click', () => {
  menu.open = !menu.open;
});

<head>
  <link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
  <link rel="stylesheet" type="text/css" href="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.css">
  <script src="https://unpkg.com/material-components-web@latest/dist/material-components-web.min.js"></script>
</head>

<body>

  <header class="mdc-top-app-bar">
    <div class="mdc-top-app-bar__row">
      <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
        <button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button" aria-label="Open navigation menu">menu</button>
        <span class="mdc-top-app-bar__title">Title</span>
      </section>
      <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-end" role="toolbar">
        <button id="menu-button" class="material-icons mdc-top-app-bar__action-item mdc-icon-button" aria-label="Open menu">more_vert</button>
      </section>
    </div>
  </header>

  <div class="mdc-menu mdc-menu-surface">
    <ul class="mdc-list" role="menu" aria-hidden="true" aria-orientation="vertical" tabindex="-1">
      <li class="mdc-list-item" role="menuitem">
        <span class="mdc-list-item__text">A Menu Item</span>
      </li>
    </ul>
  </div>

</body>

【讨论】：