显示与mixin的灰色背景

Question

我有一个小窗口，我可以插入我的页面（并在页面关闭时删除）。我希望在这个窗口后面有一个灰色背景，就像对话框一样。所以我认为我将paper-dialog-behavior或iron-overlay-behavior用作mixin，并在this.withBackdrop = true方法中设置ready()。但是，当我向此元素添加...extends Polymer.mixinBehaviors([Polymer.IronOverlayBehavior], Polymer.Element)或...extends Polymer.mixinBehaviors([Polymer.PaperDialogBehaviorImpl], Polymer.Element)时，它永远不会出现。

我在对话框中感到很累.open()，并被告知它未定义。我可以在DevTools中跟踪我的元素加载，并且在控制台中没有错误打印，但它永远不会出现在屏幕上。

你可以在这支钢笔上看到我的目标：https://codepen.io/johnthad/pen/zRLMpe 如果我将MyChild的类声明替换为mixin的类声明，则子加载但从不显示。

Answer 1

在追加后，您需要致电open MyChild

_doTap(e) {
   . . .
   this.$.placeholder.appendChild(this.mychild);
   this.mychild.open()
}

然后将withBackdrop属性添加到true组件中的MyChild：

static get properties() {
     return {
         withBackdrop: {
          type: Boolean,
          value: true
        }
     }
}

Here您将找到工作代码。