如何为Polymer 2创建一个自定义元素“resize”mixin？

Question

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

根据文档所述，Polymer 2 中的 behaviors 被类混入替换，但我对此并不是非常自信。在寻找如何替换iron-resizable-behavior时，我无法找到如何构建它。

是否有人可以向我展示在哪里可以找到一些文档或/和解释如何设计混入以响应事件？

谢谢

- FXG

Answer 1

混合行为

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

行为-类混合

你可以像这样创建一个行为-类混合:

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

然后，你可以在你的Polymer元素中像这样使用它：

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

混合行为和行为类Mixin

您可以像这样同时使用混合行为和行为类Mixin：

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

- tony19

Answer 2

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

更改：

class MyElement extends Polymer.Element {
  // Implementation
}

至：

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

这对你有用吗？

- alesc

---

不，我已经尝试过了，但是出现了错误“Polymer.IronResizableBehavior不是一个函数”。当我查看行为的代码时，它不是基于类的，就像tony19所说的那样。 - FXG

那么你可能需要使用 Polymer.mixinBehaviors 直到 Polymer.IronResizableBehavior 被重写为类行为。 - alesc

是的，这正是我所做的，并且现在它正在运作。我错过了那一行话，即“behaviors”使用混合模式设计。谢谢。 - FXG