ecmascript-6 - 如何为 Polymer 2 创建自定义元素 "resize"mixin？

Question

我正在尝试将 Polymer 1.8 组件升级到 Polymer 2。

如文档中所述，behaviors 被类 mixin 替换，但我对这些并不是很有信心。经过一些搜索，关于如何替换 iron-resizable-behavior，我无法找到如何构建它。

有没有人告诉我在哪里可以找到它的一些文档或/并解释我如何设计 mixin 以对事件使用react？

谢谢

Answer 1

混合行为

在 2.0-preview branch of <iron-resizable-behavior> , Polymer.IronResizableBehavior是一种混合行为(即定义为对象而不是类混合)。 polymer 2 提供 Polymer.mixinBehaviors() 将一个或多个混合混合与一个类合并。

用法:

class NEW_CLASSNAME extends Polymer.mixinBehaviors(HYBRID_MIXINS_ARRAY, SUPERCLASSNAME) { ... }

示例:

class MyView1 extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element) {
  static get is() { return 'my-view1'; }

  connectedCallback() {
    super.connectedCallback();
    this.addEventListener('iron-resize', this._logResizeEvent);
  }

  disconnectedCallback() {
    super.disconnectedCallback();
    this.removeEventListener('iron-resize', this._logResizeEvent);
  }

  _logResizeEvent(e) {
    console.debug('resize', e);
  }
}

window.customElements.define(MyView1.is, MyView1);

行为类混合

你可以 create a behavior-class mixin像这样:

const MyMixin = (superclass) => class extends superclass {  
  foo() {
    console.log('foo from MyMixin');
  }
};

然后，您可以像这样在 Polymer 元素中使用它:

class MyView1 extends MyMixin(Polmer.Element) {
  onClick() {
    this.foo(); // <-- from MyMixin
  }
}

混合行为 + 行为类混合

您可以像这样一起使用混合行为和行为类混合:

class MyView1 extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], MyMixin(Polmer.Element)) {
  onClick() {
    this.foo();                               // <-- from MyMixin
    console.log(this._interestedResizables);  // <-- from Polymer.IronResizableBehavior
  }
}