如何为 Polymer 2 创建自定义元素 "resize" mixin？

Question

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

如文档中所述，behaviors 被 class mixin 取代，但我对这些并不十分有信心。经过一些搜索，关于如何替换 iron-resizable-behavior，我无法找到如何构建它。

有没有人告诉我在哪里可以找到它的一些文档or/and解释我如何设计 mixin 以对事件做出反应？

谢谢

Answer 1

根据documentation，您只需要做以下事情：

变化：

class MyElement extends Polymer.Element {
  // Implementation
}

收件人：

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

这对你有用吗？

Answer 2

混合行为

在 2.0-preview branch of <iron-resizable-behavior>, Polymer.IronResizableBehavior is a hybrid behavior (i.e., defined as an object instead of a class mixin). Polymer 2 provides Polymer.mixinBehaviors() 中将一个或多个混合混合与 class 合并。

用法：

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);

行为-Class混合

你可以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混合

您可以像这样一起使用混合行为和行为-class混合：

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

如何为 Polymer 2 创建自定义元素 "resize" mixin？

How to create a custom-element "resize" mixin for Polymer 2?

mixins

web-component

ecmascript-6

polymer

custom-element

混合行为

行为-Class混合

混合行为+行为-Class混合