如何为聚合物 2 创建自定义元素"resize"混合？

Question

我正在尝试将聚合物1.8组件升级到聚合物2。

如文档中所述，behaviors被类Mixin所代替，但我对这些论文并不真正自信。搜索后，关于如何替换iron-resizable-behavior，我找不到如何构建它。

是否有人向我展示我可以在其中找到一些文档，或/和/和说明如何设计混合物以在事件上做出反应？

谢谢

Answer 1

混合行为

在<iron-resizable-behavior>的2.0-preview分支中，Polymer.IronResizableBehavior是A Hybrid行为（即定义为对象而不是类Mixin）。聚合物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);

行为类混音素

您可以创建行为级Mixin 这样：

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

然后，您将在这样的聚合物元素中使用它：

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

混合行为 行为级混合蛋白

您可以使用混合行为和行为级Mixins 这样：

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

Answer 2

根据文档，您只需要执行以下操作：

更改：

class MyElement extends Polymer.Element {
  // Implementation
}

to：

class MyElement extends Polymer.IronResizableBehavior(Polymer.Element) {
  // Implementation
}

这个适合您？