使用 mixin 显示灰色背景

Question

我有一个小的 window 插入到我的页面中（并在页面关闭时删除）。我想要这个 window 后面的灰色背景，就像在对话框中一样。所以我想我会使用 paper-dialog-behavior 或 iron-overlay-behavior 作为混合，并在我的 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 的 class 声明替换为带有 mixin 的声明，则子项加载但从不显示。

Answer 1

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

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

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

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

Here 您会找到工作代码。

使用 mixin 显示灰色背景

Showing a gray backdrop with a mixin

javascript

polymer

polymer-2.x