Question

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

正如文档中所解释的，behaviors被类mixin取代，但我对这些内容并不十分自信。经过一些搜索，关于如何替换iron-resizable-behavior，我无法找到如何构建它。

是否有人向我展示我可以在哪里找到一些文档或/并解释如何设计mixin以对事件做出反应？

由于

Answer 1

混合行为

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

用法：的

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

你可以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
  }
}

Answer 2

根据documentation，您只需执行以下操作：

变化：

class MyElement extends Polymer.Element {
  // Implementation
}

要：

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

这对你有用吗？

如何为Polymer 2创建自定义元素“调整大小”mixin？

2 个答案:

混合行为

行为类Mixin

混合行为+行为 - 类混合