polymer - 在 Polymer 2.x 中使用 Polymers 自己的行为

Question

我正在试验 Polymer 2.x，我不明白的是如何在 Polymer 2.x 中使用 Polymers 自己的行为，iron-resizable-behavior例如。

Polymer 2.0 升级指南告诉我们，对于我们自己的组件，我们应该使用类表达式混合。这很好，但是 Polymers 自己的行为呢？它们是否正在被重写为 mixin 或者它们会保持不变？有一种Polymer.mixinBehaviors方法似乎可以让我使用 Polymer 1.x mixins。这是最终解决方案还是中间步骤？

换一种说法：尽管我们被告知要为我们自己的组件使用 mixin，但Polymer 的行为是否被视为Polymer 2.x ？

资料来源：

https://www.polymer-project.org/2.0/docs/upgrade#upgrading-to-class-based-elements

在 Polymer 2 中使用 JS Mixins 应用行为

Answer 1

class MyElement extends Polymer.mixinBehaviors([Polymer.IronFormElementBehavior], Polymer.Element) { ... }

Answer 2

我认为 Polymer 有一个 API。我认为是dedupingMixin。下面是一个示例，如何为您自己的行为创建一个 mixin，以及如何在您的元素类中使用它。

var MyBehaviorMixin = Polymer.dedupingMixin(function(superClass){
  return class MyBehavior extends superClass {
    constructor() {
      super();
    }

    methodInBehavior() {
      return "this method is defined in Behavior";
    }
  }
}
class MyElement extends MyBehaviorMixin(Polymer.Element){
  constructor(){
    super();
    console.log(this.methodInBehavior());
  }
}

Answer 3

所以我找到了一种如何在 Polymer2 中使用 iron-resizable-behavior
而不是使用 Mixin 我正在使用 codeMonkey 的语法并扩展他的答案以显示如何使用它
据我所知，这个解决方案是聚合物 1 和 2 的混合

class customElement extends Polymer.mixinBehaviors([Polymer.IronResizableBehavior], Polymer.Element) {
    static get is() { return 'custom-element'; }

    ready() {
        super.ready();

        this.addEventListener('iron-resize', () => { this.onWidthChange() });

    }

    onWidthChange() {
        var w = this.offsetWidth;
        if (w > 0)
            console.log("Width of page is now ", w);
    }

}