时间戳

首页 > 解决方案 > 如何从外部打开和关闭 Ember Power Select

javascript - 如何从外部打开和关闭 Ember Power Select

问题描述

我知道这个问题，但并不完整。我想从外部打开和关闭下拉菜单。

mousedown单击我的包装器组件时，我可以调度一个事件，因此ember-power-select触发器打开！但是，如果我再次单击它不会关闭。更准确地说，它会快速关闭并再次打开。

我的假设是组件正在侦听blur事件以关闭，然后mousedown再次到达并打开触发器。

有没有人设法让它工作？还是替代品？？我很迷茫:)

谢谢您的帮助！

wrapper-component.js 

  didInsertElement() {

    this._super(...arguments);
    this.element.addEventListener('mousedown', (event) => {
      event.stopPropagation();
      const eventedElement = this.element.querySelector('.ember-power-select-trigger');
      const mouseDownEvent = new MouseEvent('mousedown');
      eventedElement.dispatchEvent(mouseDownEvent);
    });

  },

标签： javascriptdomeventsember.jsember-power-select

解决方案

根据文档，与触发器/组件交互的唯一方法是通过 ember-power-select 组件的子组件、块和操作中提供的只读 API。

由于您已经可以打开触发器，因此您可以在onchange渲染 ember-power-select 的组件（或路由控制器）中定义的事件操作中缓存 API：

渲染组件的位置只需提供一个操作onopen：

{{#ember-power-select
  options=options
  selected=selectedOption
  onchange=(action "someAction")
  onopen=(action "cacheAPI")
  as |option|}}
  {{option}}
{{/ember-power-select}}

在呈现它的组件或控制器中：

actions: {

  cacheAPI(options) {
    if (this.powerSelectAPI) return;

    this.set('powerSelectAPI', options);

    // if you just want the actions:
    // this.set('powerSelectAPI', options.actions);
  }

}

然后您可以通过 API 打开/关闭触发器：

this.get('powerSelectAPI').actions.close();

推荐阅读