显示带有混入的灰色背景 [英] Showing a gray backdrop with a mixin

问题描述

我有一个小窗口要插入到页面中(在关闭页面时将其删除).我希望该窗口后面有一个灰色的背景，就像在对话框上一样.所以我想我将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)时，它永远不会出现.

I have a small window that I'm inserting into my page (and removing when the page is closed). I want a grayed-out background behind this window, as on dialogs. So I thought I'd use paper-dialog-behavior or iron-overlay-behavior as a mixin, and set this.withBackdrop = true in my ready() method. However, when I add ...extends Polymer.mixinBehaviors([Polymer.IronOverlayBehavior], Polymer.Element) or ...extends Polymer.mixinBehaviors([Polymer.PaperDialogBehaviorImpl], Polymer.Element) to this element, it never appears.

像在对话框上一样，我累了.open()，并被告知它是未定义的.我可以在DevTools中跟踪我的元素加载，并且在控制台中不会显示任何错误，但是它永远不会出现在屏幕上.

I tired .open() like on a dialog and was told that it's undefined. I can trace my element loading in DevTools, and no errors print in the console, but it never appears on the screen.

您可以在这支笔上看到我要做什么: https://codepen.io/johnthad/pen/zRLMpe 如果我将MyChild的类声明与mixin交换，则子级将加载但从不显示.

You can see what I'm going for at this pen: https://codepen.io/johnthad/pen/zRLMpe If I swap the class declarations of MyChild for the one with the mixin, the child loads but never displays.

推荐答案

您需要在附加后调用MyChild的open:

You need to call open of MyChild after append:

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

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

Then add withBackdrop property to true in MyChild component:

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

在这里，您将找到有效的代码.

Here you'll find working code.

这篇关于显示带有混入的灰色背景的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！