Question

我试图在点击＆＃34; base＆＃34;上的肯定按钮后显示确认对话框对话。此确认对话框永远不会出现相反，＆＃34; base＆＃34;当我点击其肯定按钮时，对话框立即关闭。

如何解决问题？提前谢谢！

文件 confirm-dialog.html ：

<link rel="import" href="https://polygit.org/components/PolymerElements/paper-dialog-behavior/paper-dialog-behavior.html">
<link rel="import" href="https://polygit.org/components/PolymerElements/paper-button/paper-button.html">
<dom-module id="confirm-dialog">
    <template>
        <paper-dialog>
            <h2>[[msgHeader]]</h2>
            <content></content>
            <div class="buttons">
                <paper-button dialog-dismiss>[[msgDismiss]]</paper-button>
                <paper-button dialog-confirm>[[msgConfirm]]</paper-button>
            </div>
        </paper-dialog>
    </template>
</dom-module>
<script>
Polymer({
    is:'confirm-dialog'
    ,behaviors:[Polymer.PaperDialogBehavior]
    ,properties:{
        msgHeader:String
        ,msgDismiss:String
        ,msgConfirm:String
    }
    ,show:function(){
        this.$$("paper-dialog").open();
    }
});
</script>

文件 index.html ：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="http://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="http://polygit.org/components/polymer/polymer.html">
    <link rel="import" href="http://polygit.org/components/PolymerElements/paper-dialog/paper-dialog.html">
    <link rel="import" href="https://polygit.org/components/PolymerElements/paper-button/paper-button.html">
    <link rel="import" href="confirm-dialog.html">
</head>
<body>
<dom-module id="dialog-in-dialog">
    <template>
        <button on-tap="Button1Clicked">Open Base Dialog</button>
        <paper-dialog id="base">
            <h2>Base Dialog</h2>
            <p>This is base dialog.</p>
            <confirm-dialog msg-header="Confirm Dialog" msg-dismiss="Cancel" msg-confirm="Do it">Sure want to break the window?</confirm-dialog>
            <div class="buttons">
                <paper-button dialog-dismiss>Cancel</paper-button>
                <paper-button dialog-confirm on-tap="OpenDialog2">Break the window</paper-button>
            </div>
        </paper-dialog>
    </template>
</dom-module>
<script>
    var init=function(){
        Polymer({
            is:"dialog-in-dialog"
            ,Button1Clicked:function(){
                this.$.base.open();
            }
            ,OpenDialog2:function(){
                this.$$("confirm-dialog").show();
            }
        });
    };
    if(HTMLImports.ready)
        init();
    else
        HTMLImports.whenReady(init);
</script>
<dialog-in-dialog></dialog-in-dialog>
</body>
</html>

＆＃13;

<script src="https://polygit.org/components/webcomponentsjs/webcomponents-lite.min.js"></script>
<link rel="import" href="https://polygit.org/components/polymer/polymer.html">
<link rel="import" href="https://polygit.org/components/paper-dialog/paper-dialog.html">
<link rel="import" href="https://polygit.org/components/paper-button/paper-button.html">


<dom-module id="confirm-dialog">
  <template>
    <paper-dialog>
      <h2>[[msgHeader]]</h2>
      <content></content>
      <div class="buttons">
        <paper-button dialog-dismiss>[[msgDismiss]]</paper-button>
        <paper-button dialog-confirm>[[msgConfirm]]</paper-button>
      </div>
    </paper-dialog>
  </template>
</dom-module>
<script>
  Polymer({
    is: 'confirm-dialog',
    behaviors: [Polymer.PaperDialogBehavior],
    properties: {
      msgHeader: String,
      msgDismiss: String,
      msgConfirm: String
    },
    show: function() {
      this.$$("paper-dialog").open();
    }
  });
</script>



<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
</head>

<body>
  <dom-module id="dialog-in-dialog">
    <template>
      <button on-tap="Button1Clicked">Open Base Dialog</button>
      <paper-dialog id="base">
        <h2>Base Dialog</h2>
        <p>This is base dialog.</p>
        <confirm-dialog msg-header="Confirm Dialog" msg-dismiss="Cancel" msg-confirm="Do it">Sure want to break the window?</confirm-dialog>
        <div class="buttons">
          <paper-button dialog-dismiss>Cancel</paper-button>
          <paper-button dialog-confirm on-tap="OpenDialog2">Break the window</paper-button>
        </div>
      </paper-dialog>
    </template>
  </dom-module>
  <script>
    var init = function() {
      Polymer({
        is: "dialog-in-dialog",
        Button1Clicked: function() {
          this.$.base.open();
        },
        OpenDialog2: function() {
          this.$$("confirm-dialog").show();
        }
      });
    };
    if (HTMLImports.ready)
      init();
    else
      HTMLImports.whenReady(init);
  </script>
  <dialog-in-dialog></dialog-in-dialog>
</body>

</html>

＆＃13;

[编辑] 我希望父级paper-dialog在其子paper-dialog打开后保持打开状态。根据善良大师的帮助，我从父paper-button中删除paper-dialog，如此修订版所示：

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <script src="../bc/webcomponentsjs/webcomponents-lite.min.js"></script>
    <link rel="import" href="../bc/polymer/polymer.html">
    <link rel="import" href="../bc/paper-dialog/paper-dialog.html">
    <link rel="import" href="../bc/paper-button/paper-button.html">
    <link rel="import" href="confirm-dialog.html">
</head>
<body>
    <dom-module id="dialog-in-dialog">
        <template>
            <button on-tap="Button1Clicked">Open Base Dialog</button>
            <paper-dialog id="base">
                <h2>Base Dialog</h2>
                <p>This is base dialog.</p>
                <button on-tap="OpenDialog2">Break the window</button>
                <div class="buttons">
                    <paper-button dialog-dismiss>Exit</paper-button>
                </div>
            </paper-dialog>
            <confirm-dialog msg-header="Confirm Dialog" msg-dismiss="Cancel" msg-confirm="Do it">Sure want to break the window?</confirm-dialog>
        </template>
    </dom-module>
    <script>
        var init=function(){
            Polymer({
                is:"dialog-in-dialog"
                ,Button1Clicked:function(){
                    this.$.base.open();
                }
                ,OpenDialog2:function(){
                    this.$$("confirm-dialog").show();
                }
            });
        };
        if(HTMLImports.ready)
            init();
        else
            HTMLImports.whenReady(init);
    </script>
    <dialog-in-dialog></dialog-in-dialog>
</body>
</html>

Answer 1

您需要对当前代码进行两处更改才能使其正常工作

1. 您需要从behavior项中删除confirm-dialog。由于您的元素本身不会打开而只是在内部调用paper-dialog的{{1}}函数，因此无需在自定义元素中导入open。
1. 您需要从要用于打开嵌套对话框的按钮中删除PaperDialogBehavior。添加它将关闭您的父对话框，因此您尝试打开嵌套对话框将失败。

或

1. 如果您要关闭第一个对话框并打开第二个对话框，则可以移动dialog-confirm元素，而不是删除dialog-confirm元素。这将在单击按钮关闭父对话框并打开子对话框，如代码here

＆＃13;

custom-dialog

＆＃13;

纸对话框中的聚合物纸对话框

1 个答案: