使用 mixin 显示灰色背景

Question

我有一个小窗口要插入到我的页面中（并在页面关闭时删除）。我想要这个窗口后面的灰色背景，就像对话框一样。所以我想我会使用paper-dialog-behavior 或iron-overlay-behavior 作为mixin，并在我的ready() 方法中设置this.withBackdrop = true。但是，当我将...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 of MyChild：

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

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

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

Here 你会找到工作代码。