0

我想用 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 在这里被定义为全局常量。控制台或这个 EventListener 怎么可能不知道呢？

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

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

导入似乎有问题。但是 EvenListener 只是引用实例，而不是类。我不明白为什么它甚至需要 MDCMenu ......

4

2 回答 2

1

在 vanilla JS 中，您必须使用完全限定名称。

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

见小提琴

ps：我认为事件监听器应该做menu.open = !menu.open;

于 2019-11-06T12:20:05.260 回答
0

我忘了导入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);
于 2019-12-11T16:43:19.737 回答