聚合物 IronRessizeableBehavior 当“可调整大小”元素被隐藏/取消隐藏时，不会触发 Iron 调整

Polymer IronResizableBehavior iron-resize event not fired when "resizable" element is hidden/un-hidden as described in docs

本文关键字：隐藏 取消 调整 Iron 可调整 IronRessizeableBehavior 元素 可调整大小 聚合物      更新时间：2023-09-26

下面是Polymer IronRessizeableBehavior演示，该演示基于隐藏或取消隐藏的"可调整大小"元素而不是仅仅在调整窗口大小时进行修改。 调整窗口大小时会触发该事件，但 Polymer 文档 （https://elements.polymer-project.org/elements/iron-resizable-behavior） 指示：

当它们在

隐藏后变为显示时、当它们被另一个可调整大小的窗口显式调整大小时，或者当窗口已调整大小时，将触发此事件。

因此，我希望当我隐藏/取消隐藏下面的"x-puck"元素时也会触发该事件。 我做错了什么？

<link rel="import" href="../../iron-resizable-behavior.html">
<link rel="import" href="../../../paper-button/paper-button.html">
<dom-module id="x-puck">
  <style>
  </style>
  <template>
    <b>I'm an un-hidden element!</b>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-puck',
    behaviors: [
      Polymer.IronResizableBehavior
    ],
    listeners: {
      'iron-resize': '_onIronResize'
    },
    attached: function() {
      this.async(this.notifyResize, 1);
    },
    _onIronResize: function() {
      alert('x-puck _onIronResize called!');
    }
  });
</script>

<dom-module id="x-app">
  <style>
  </style>
  <template>
    <paper-button on-tap="showElement">Show</paper-button>
    <paper-button on-tap="hideElement">Hide</paper-button>
    <x-puck id="xPuck" hidden$="{{hide}}"></x-puck>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'x-app',
    behaviors: [
      Polymer.IronResizableBehavior
    ],
    properties: {
      hide: {
        type: Boolean,
        value: true
      }
    },
    showElement: function() {
      this.hide = false;
    },
    hideElement: function() {
      this.hide = true;
    }
  });
</script>

我快速查看了IronResizableBehavior的源代码，没有看到任何支持实现它的元素在其 CCS display 属性更改时调整大小的内容（它本质上是 hidden 属性的作用）。

查看iron-pages元素，您可以看到每当元素未隐藏时，它都会显式调用notifyResize，所以我认为这就是它的工作方式。

我建议您在 Github 存储库上打开一个问题，以便获得更多反馈，如果我是对的，请纠正这个误导性陈述。

相关文章：