组件类中的纸质对话框句柄 onclose答案

【问题标题】：paper-dialog handle onclose in component class组件类中的纸质对话框句柄 onclose
【发布时间】：2019-08-04 21:37:23
【问题描述】：

我正在尝试在 Web 组件中为 Polymer 2 使用“paper-dialog”标签。

我正在尝试检测用户何时单击取消按钮和保存/确定按钮。

文档说要为“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>

下面的 open 方法添加了监听器。

无论我点击保存还是取消，fireCallback 方法都会关闭。

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

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

【问题讨论】：

标签： polymer paper-dialog

【解决方案1】：

如果你明确定义了两个按钮的点击方法，那么你就知道点击了哪个按钮；

Demo

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

【讨论】：

我正在使用一个类，所以它的成员方法不是全局的。我还读到使用“点击”属性是不好的做法，我们应该使用 addEventListener。
@BrettSutton，请检查编辑的部分是否适合您的需要

【解决方案2】：

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

【讨论】：