Отображение серого фона с миксином

У меня есть небольшое окно, которое я вставляю на свою страницу (и удаляю, когда страница закрывается). Я хочу, чтобы за этим окном был серый фон, как в диалогах. Поэтому я решил использовать paper-dialog-behavior или iron-overlay-behavior в качестве миксина и установить 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 на объявление с миксином, дочерний элемент загружается, но никогда не отображается.


javascript polymer polymer-2.x
person Thad    schedule 22.02.2018    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Вам нужно вызвать open из MyChild после добавления:

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

Затем добавьте свойство withBackdrop в true в компоненте MyChild:

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

Здесь вы найдете рабочий код.

person Makha    schedule 25.02.2018
comment
Спасибо, это работает. Но, как ни странно, в моем реальном приложении фон покрывает ребенка, несмотря на то, что фон имеет z-index = 102, а дочерний элемент имеет z-index = 103. И ребенок остается закрытым, даже когда я играю с z-indexes в DevTools. Родитель находится в iron-page в _5 _... Но все же я не могу понять, почему ребенок не наверху. - person Thad; 25.02.2018
comment
@ Я думаю, это проблема наложения контекстов. Вероятно, родительский элемент скрытого элемента создает новый контекст стекирования. Здесь вы можете найти дополнительную информацию об этом. - person Makha; 25.02.2018
comment
Да это оно. В моем приложении, если я удаляю placeholder, напрямую увеличиваю размер mychild1 и вызываю document.body.appendChild(this.mychild);, он работает. У меня есть еще кое-что, чтобы поиграть с этим, но это здорово. Спасибо большое за вашу помощь. (Кстати, placeholder возникли другие проблемы с vaadin-grid, к которым я обращаюсь.) - person Thad; 26.02.2018