0

我正在尝试在 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");
            }
4

2 回答 2

1

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

演示

<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
  }
于 2019-03-14T12:48:48.510 回答
0

@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>
于 2019-03-15T20:40:58.807 回答