在ember-power-select( onmouseEnter，OnMouseLeave)中注册自定义事件

Question

如何在Ember-power-select中注册我的自定义事件(onmouseEnter，OnMouseLeave)。默认情况下只支持: onblur，onchange，onclose，onfocus，oninput，onkeydown，onopen，scrollTo。

Answer 1

我的答案更一般，适用于如何向现有插件添加功能。在ember中，所有插件(更具体地说是插件的/app目录中定义的插件)都会自动合并到消费应用程序的app目录中。这具有将组件工厂注册到依赖注入容器注册表的净效果。

如果你有一个与插件名称完全相同的组件，你的组件将胜出(即覆盖component:your-component的注册表项。

因此，在ember应用的经典非pods布局中，您可以这样定义your-app/components/power-select：

import PowerSelect from 'ember-power-select/components/power-select';

export default PowerSelect.extend({
    init(){
        this._super(...arguments);
        // do custom stuff
    },
    onMouseEnter(_, event){
        // I've taken this code from how `power-select` already handles events
        let action = this.get('onMouseEnter');
        if (action) {
            action(this.get('publicAPI'), event);
        }
    }
})

你最终会为你的应用程序定制一个power-select版本。现在，你想要对power-select做的事情变得更加复杂，因为你想要处理来自power-select内部的事件，power-select当前没有委托给它的subcomponents。

{{#dropdown.trigger
    // You add this line
    onMouseEnter=(action "onMouseEnter")
    role=(readonly triggerRole)
    tagName=(readonly _triggerTagName)
    ...
    tabindex=(readonly tabindex)}}

这之所以有效，是因为ember-basic-dropdown已经内置了对此操作的支持。如果不手动管理这个组件的升级，就不能进行升级，这是一个明显的缺点，但它确实可以让您快速完成工作。如果你选择这种方法，我强烈建议你尝试创建PR并将其合并到上游。