用另一个div包装paper-dialog-scrollable

Question

我尝试在paper-dialog-scrollable内使用paper-dialog但是div包裹了可滚动

示例代码：

<paper-dialog>
  <div>
    <div class="loading">Loading</div>
    <paper-dialog-scrolalble> ...dynamic long content... </paper-dialog-scrollable>
  </div>
</paper-dialog>

我正在使用AJAX加载内容，因此预计会有一些加载屏幕。在div.loading内使用paper-dialog-scrollable是无稽之谈，因为用户可以滚动浏览内容，加载叠加层将被滚动（使用绝对位置）。所以我不得不将它包装在另一个具有子高度的div中，因此我可以在加载div时使用绝对位置。

问题是paper-dialog-scrollable不再有效。它的高度约为60px。所以我去了文档，发现有一个名为dialogElement的属性，我设置此属性对paper-dialog进行了引用。什么都没发生

解决方案是转到paper-dialog-scrollable.html和内部函数重写this.dialogElement = this.dialogElement || this.parentElement;到this.dialogElement = this.dialogElement || this.parentElement.parentElement;

但这真的很笨，我应该检查第一个parentElement是否需要行为，然后是parentElement.parentElement ......这不是我想做的..编辑源代码。这完全是关于时间的。如果您在第一次调用函数dialogElement之前设置了属性_ensureTarget，它将起作用。

要使其有效，您必须在调用dialogElement内的attached或ready函数之前设置paper-dialog-scrollable。但是没有办法实现这一目标。因为我自己元素中的attached已经太晚了......

来自docs：

  

如果paper-dialog-scrollable不是实现Polymer.PaperDialogBehavior的元素的直接子元素，请记住设置dialogElement：

     

<script> var scrollable = Polymer.dom(myDialog).querySelector('paper-dialog-scrollable'); scrollable.dialogElement = myDialog; </script>

喜欢WTF Polymer团队？我正在使用影子dom。当它像在阴影根中嵌套二十次时，我怎样才能访问myDialog？

这个计时难题有没有解决方案？

我正在使用纸质对话版2.0.1

和paper-dialog-scrollable版本2.1.0

由于

Answer 1

如果您想更改paper-dialog尺寸和paper-dialog-scrollable元素的尺寸。只需移除外部div并通过mixin paper-dialog-scrollable限制scrollTarget的宽度/高度：

 paper-dialog paper-dialog-scrollable {
    --paper-dialog-scrollable: {
      box-sizing: border-box;
      width: 60px;
      height: 60px;
    }
  }