获取嵌套在 Polymer paper-dialog 中的自定义 Web 组件中内容的 clientHeight

Question

我会尽力解释我的问题。

我正在使用 <paper-dialog> 和 <paper-dialog-scrollable>。

在 <paper-dialog-scrollable> 中，我有一个自定义表单 web-component。

在这个表单中，我使用了另一个自定义 web-component 来展开和折叠内容。

内容的默认状态为折叠。

在expandcomponent中我将内容的clientHeight保存在一个变量contentHeight中，并将内容的height设置为0。

我有一个函数 toggle()，它在单击触发器时执行。

toggle() 将内容 height 设置为 contentHeight。

现在，当我单独使用我的表单或扩展组件时，它可以完美地工作，但是当它们嵌套在 paper-dialog 中时它不起作用，因为 clientHeight 是 0。

代码：

<paper-dialog with-backdrop style="min-width: 90%;">
   <paper-dialog-scrollable>
      <my-custom-form-component></my-custom-form-component>
   </paper-dialog-scrollable>
</paper-dialog>

来自 <my-custom-form-component> 的代码：

<div id="custom-expand-component-trigger"></div>
<custom-expand-component trigger="custom-expand-component-trigger">
   blabla a lot of content......
</custom-expand-component>

toggle() 函数（在 <custom-expand-component> 内）：

function toggle(){
  if(!that.opened){
    content.style.height = contentHeight + 'px';  //contentHeight is 0 when form is nested in <paper-dialog>
  } else{
    content.style.height = startHeight;
  }
  that.opened = !that.opened;
}

即使我的表单在对话框中，我如何获得 clientHeight 的任何想法？

我希望这已经够清楚了。

不胜感激

Answer 1

隐藏元素的 clientHeight 为 0，因此在渲染之前您无法获取它。

当 <paper-dialog> 打开时，该元素实际上首先呈现。当它发生时， iron-overlay-opened 事件被触发。这是获得正确 clientHeight 的机会，如果您之前没有设置它：

myDialog.addEventListener( "iron-overlay-opened", function ()
{
    this.querySelector( "custom-expand-component" ).init()
} )

在 init() 方法中，为您的私有变量设置正确的值：

var CEC = Object.create( HTMLElement.prototype )
CEC.createdCallback = function () {
    var that = this
    var startHeight
    var contentHeight 

    this.init = function () {
        if ( !contentHeight ) {
            contentHeight = this.clientHeight + "px"  //OK
            startHeight = this.getAttribute( "start-height" )
            opened = false                  
            this.style.height = startHeight
        }
    }

    document.getElementById( this.getAttribute( "trigger" ) ).onclick = toggle

    function toggle() {
        opened = !opened
        that.style.height = ( opened )? contentHeight : startHeight
    }
}
document.registerElement( "custom-expand-component", { prototype: CEC } )

CSS 转换现在有效：

custom-expand-component {
    display: block ;
    overflow-y: scroll ;
    transition: height 0.5s ;
}

获取嵌套在 Polymer paper-dialog 中的自定义 Web 组件中内容的 clientHeight

Get clientHeight of content inside custom web-component nested in Polymer paper-dialog

html

javascript

dialog

web-component

polymer