1

我正在使用名为“菜单”的 Material Design Web Components 组件。

启动菜单后，我需要能够轻松处理“选择”“菜单项”的所有方式。通过我的框架的模板语言 (vue) 添加点击是有效的，但是，为 on-enter 和其他键添加方法不起作用。例子：

  <li
    v-for="option in options"
    :key="option"
    class="mdc-list-item"
    @click="onChange(option)" // this works
    @keyup.enter="onChange(option)" //this doesn't work
    role="menuitem">

我希望这是因为该enter键具有用于关闭菜单的事件处理程序，这些处理程序正在捕获我的按键。我不完全确定。

无论如何，处理选择的“正确”方式似乎是通过MDCMenu:selected事件。文档中的描述：

[ MDCMenu:selectedis] 用于指示何时选择了元素。此事件还包括所选项目和该项目的列表索引。

但是，没有关于如何捕获此事件的说明。我试过了：

this.menu = new MDCMenu(this.$refs.menu);
this.menu.root.addEventListener(
  'MDCSimpleMenu:selected', ()=>{console.log('HELLOOOOOO')});

这导致了很多undefined错误，这很奇怪，因为我可以访问this.menu.root它并且它似乎是一个 DOM 元素。

我也试过：

this.menu = new MDCMenu(this.$refs.menu);
this.menu.addEventListener(
  'MDCSimpleMenu:selected', ()=>{console.log('HELLOOOOOO')});

这引发了一个关于如何addEventListener不存在函数的错误this.menu；

我搜索了源代码，但没有发现任何关于事件处理或发射的明显内容。

如何捕捉MDCMenu:selected事件？

4

1 回答 1

4

该函数显然被称为listen，并将完整的字符串事件名称作为第一个参数，将要调用的函数作为第二个参数。

 this.menu.listen('MDCMenu:selected',()=>{
   console.log('hi');
 });

这在我能找到的任何地方都没有记录，我猜到了。如果有人能找到文档，我将接受该答案。

于 2019-08-20T21:49:46.177 回答