Question

我正在尝试在Web组件中为聚合物2使用'paper-dialog'标签。

我试图检测用户单击取消按钮还是单击保存/确定按钮。

文档说明要为“铁覆盖关闭”创建一个事件，以检测单击“确定/保存”按钮的时间。

我的问题是，即使我单击“取消”按钮，“铁盖关闭”也会触发。

根据我对文档的阅读，只有具有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");
            }

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

at脚本；

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

Answer 2

@HakanC您的示例将我引向答案。

问题是我没有导入以下内容：

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

没有导入，我的addEventListener总是触发，但是伴随事件返回的details对象中的“ confirmed”字段始终为false。

所以我的两个问题是： 1）没意识到我错过了进口 2）预计仅当我单击保存时才会触发该事件 -它会触发取消和保存操作，您需要检查“确认”字段以查看实际单击了哪个按钮。

所以最后一个对话框是：

# Importing modules
import os
import asyncio
import sys
import Events
import glob
import Plugins
global FPath
global PlugPath
global CMDPath
FPath = os.path.dirname(os.path.abspath(__file__))
PlugPath = os.path.dirname(os.path.abspath(__file__)) + "\\Plugins"

Events.Startup()
global cmds
cmds = input("\\>")
global commandlst
commandlst = cmds.split()
command = commandlst[0]
runpy = "python " + str(FPath) + "\\" +  str(command) + ".py"
if(os.path.isfile(FPath + "\\" + command + ".py") == True):
    os.system(runpy)
else:
    print(command + " is not a command or a plugin command!")
    os.system("ping localhost -n 2 >nul")
    os.system("py client.py")

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

2 个答案: