Блог

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

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

В документации сказано создать событие для ‘iron-overlay-closed’, чтобы определить, когда нажата кнопка OK / Save.

Моя проблема в том, что ‘iron-overlay-closed’ срабатывает, даже когда я нажимаю кнопку отмены.

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

 <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> 
  

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

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

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

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

  

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

ДЕМОНСТРАЦИЯ

 <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');
} 
  

Редактировать

Как прокомментировал @Brett Sutton, при закрытии 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
  }
  

@HakanC ваш пример подводит меня к ответу.

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

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

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

Итак, мои две проблемы были: 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>