ручку диалога с бумагой в классе компонентов - PullRequest
Новая
       32

ручку диалога с бумагой в классе компонентов

0 голосов
/ 14 марта 2019

Я пытаюсь использовать тег «paper-dialog» для Polymer 2 в веб-компоненте.

Я пытаюсь определить, когда пользователь нажимает кнопку «Отмена» против кнопки «Сохранить / ОК».

Документация гласит, что необходимо создать событие для «железного оверлея-закрытого», чтобы определить, когда нажата кнопка «ОК / Сохранить».

Моя проблема в том, что «железо-оверлей-закрыто» срабатывает, даже когда я нажимаю кнопку отмены.

Из моего прочтения документации только кнопка с атрибутом диалогового подтверждения должна вызывать событие. 

<paper-dialog modal backdrdop id="dialog">
        <h2>Select Time</h2>
        <paper-dialog-scrollable>
            <div slot="body">
                <p>Body is here</p>
            </div>
        </paper-dialog-scrollable>
        <div id="dialog-buttons">
            <paper-button dialog-dismiss>Cancel</paper-button>
            <paper-button dialog-confirm autofocus>Save</paper-button>
        </div>
    </paper-dialog>

Приведенный ниже метод open добавляет слушателя.

Затем метод fireCallback закрывается независимо от того, нажимаю ли я кнопку Сохранить или Отмена. 

       open()
            {
                this.$.dialog.addEventListener('iron-overlay-closed', ()=> {this.fireCallback()});
                this.$.dialog.open();
            }

            fireCallback()
            {
                console.log("closing");
            }

Ответы [ 2 ]

0 голосов
/ 15 марта 2019

@ HakanC твой пример привел меня к ответу.

Проблема заключалась в том, что мне не хватало импорта для: 

<link href="../../../bower_components/iron-overlay-behavior/iron-overlay-behavior.html" rel="import">

Без импорта мой addEventListener всегда срабатывал, но поле «подтверждено» в объекте сведений, возвращаемом с событием, всегда было ложным.

Итак, две мои проблемы были: 1) не понимал, что я пропускал импорт 2) ожидал, что событие сработает только после нажатия кнопки «Сохранить». - он запускается для отмены и сохранения, и вам нужно проверить поле «подтверждено», чтобы увидеть, какая кнопка была фактически нажата.

Итак, последний диалог был: 

<link rel="import" href="../../../bower_components/polymer/polymer.html">
<link rel="import"  href="../../../bower_components/paper-dialog/paper-dialog.html">
<link href="../../../bower_components/iron-overlay-behavior/iron-overlay-behavior.html" rel="import">

<dom-module id="dialog-test"> 
<template>
    <style include="shared-styles">
    :host {
        display: block;
        margin: 5px;
        height: 100%;
    }

    paper-dialog {
        width: 100%;
        margin: 0px;
    }

    #dialog-buttons {
        display: flex;
        justify-content: space-between;
    }
    </style>

    <paper-dialog modal backdrdop id="dialog">
        <h2>Select Time</h2>
        <paper-dialog-scrollable>
            <div slot="body">
                <p>Body is here</p>
            </div>
        </paper-dialog-scrollable>
        <div id="dialog-buttons">
            <paper-button dialog-dismiss>Cancel</paper-button>
            <paper-button dialog-confirm autofocus>Save</paper-button>
        </div>
    </paper-dialog> 

</template> 
<script>
        class DialogTest extends Polymer.Element {


            static get is() {
                return 'dialog-test';
            }

            static get properties() {
                return {

                };
            }

            open()
            {
                this.$.dialog.addEventListener('iron-overlay-closed', (e)=> {this.fireCallback(e)});
                this.$.dialog.open();
            }

            fireCallback(e)
            {
                console.log(e.detail);
                if (c.detail.confirmed == true)
                {
                    console.log("saving")
                }
            }

            connectedCallback()
            {
                super.connectedCallback();
                this.open();
            }
        }
        customElements.define(DialogTest.is, DialogTest);
    </script> </dom-module>
0 голосов
/ 14 марта 2019

Если вы определите метод нажатия для обеих кнопок явно, то вы поймете, какая кнопка нажата;

Демо 

<div class="buttons">
    <paper-button dialog-dismiss on-tap="_cancelled">Cancel</paper-button>
    <paper-button dialog-confirm autofocus on-tap="_confirmed">OK</paper-button>
</div>

В сценарии: 

_cancelled(){
     console.log('Cancelled');

}
_confirmed(){
    console.log('Confirmed');
}

РЕДАКТИРОВАТЬ

As @BrettКомментарий Саттона при закрытии события paper-dialog, iron-overlay-closed; 

 <paper-dialog id="scrolling" on-iron-overlay-closed="_myClosedFunction">

в сценарии;

  _myClosedFunction(c){
    console.log('Closed as ', c.detail); // canceled: false,  confirmed: true
  }
...