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

Question

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

Polymer 2.0升级指南告诉我们，对于我们自己的组件，我们应该使用类表达式mixin。那很好但是聚合物自己的行为怎么样？他们是否正在被重写为mixins，还是会保持不变？有Polymer.mixinBehaviors方法似乎允许我使用Polymer 1.x mixins。这是最终解决方案还是中间步骤？

用另一种方式表达：聚合物行为是否被认为是 Polymer 2.x ，尽管我们被告知要将mixins用于我们自己的组件？

来源：

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

Applying Behaviors with JS Mixins in Polymer 2

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中使用铁可调整行为的方法 而不是使用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);
    }

}