从按钮打开 MDCMenu

Question

我想用 MDCTopAppBar 中的按钮打开 MDCMenu。该文档缺少如何执行此操作的示例代码。所以我试图通过 EventListener 来做到这一点。如果有更流畅的方法，请告诉我。

EvenListener 抱怨 MDCMenu 未定义。

import {MDCMenu} from '@material/menu';
import {MDCTopAppBar} from '@material/top-app-bar';
import {MDCMenuSurface} from '@material/menu-surface';

const topAppBarElement = document.querySelector('.mdc-top-app-bar');
const topAppBar = new MDCTopAppBar(topAppBarElement);

console.log('hello world');

const menu = new MDCMenu(document.querySelector('.mdc-menu'));

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

menu 在这里定义为全局常量。怎么可能是console不知道，这个EventListener呢？

单击该按钮会在控制台中触发以下内容：

ReferenceError: MDCMenu is not defined localhost:8080:1:14
    onclick http://localhost:8080/:1

导入似乎出了点问题。但是 EvenListener 只是指实例，而不是 class。我不明白为什么它甚至需要 MDCMenu...

Answer 1

在原版 JS 中，您必须处理完全限定名称。

const menu = new mdc.menu.MDCMenu(document.querySelector('.mdc-menu'));

See Fiddle

p.s.: 我认为事件监听器应该做 menu.open = !menu.open;

Answer 2

我忘记导入 MDCMenuSurface。完整的运行代码是：

import {MDCMenu} from '@material/menu';
import {MDCTopAppBar} from '@material/top-app-bar';
import {MDCMenuSurface} from '@material/menu-surface';

// Instantiation
const topAppBarElement = document.querySelector('.mdc-top-app-bar');
const topAppBar = new MDCTopAppBar(topAppBarElement);

const menu = new MDCMenu(document.querySelector('.mdc-menu'));

function openMenu() {
   menu.open = !menu.open;

}

document.querySelector('#menu-button').addEventListener("click", openMenu);

从按钮打开 MDCMenu

Opening MDCMenu from Button

mdc-components

material-components-web