以下是基于隐藏或未隐藏的“可调整大小”元素而不是仅在正在调整大小的窗口上激活的Polymer IronResizableBehavior演示。调整窗口大小时会触发该事件,但Polymer docs(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>
答案 0 :(得分:3)
I looked fastly at the source code of IronResizableBehavior
and didn't see anything that would support that an element implementing it will be resized whenever its CCS display
property is changed (it's essentially what the hidden
attribute does).
Looking at the iron-pages
element, you can see that it explicitely calls notifyResize
whenever an element is unhidden, so I supposed this is the way it works.
I would suggest you to open an issue on the Github repo in order to get more feedback on this, and to correct this misleading statement if I'm right.