文章/答案/技术大牛

发布

社区首页 >问答首页 >聚合物纸.纸中的对话.对话

问聚合物纸.纸中的对话.对话
EN

Stack Overflow用户

提问于 2016-07-15 16:01:03

回答 1查看 886关注 0票数 0

我试图使确认对话框显示后，我点击肯定按钮上的“基础”对话框。此确认对话框永远不会出现。相反，“基本”对话框立即关闭时，我点击它的肯定按钮。

我该怎么解决这个问题？提前感谢！

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

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

编辑我希望父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>

polymer

polymer-1.0

paper-elements

回答 1

Stack Overflow用户

回答已采纳

发布于 2016-07-15 17:19:05

您需要对当前代码进行两次更改才能正常工作。

1. 您需要从您的behavior项中删除confirm-dialog。由于元素本身不会打开，并且只是在内部调用paper-dialog的open函数，因此不需要在自定义元素中导入PaperDialogBehavior。

1. 您需要从按钮中删除dialog-confirm，该按钮将用于打开嵌套对话框。添加这将关闭父对话框，因此打开嵌套对话框的尝试将失败。

或

1. 如果您想关闭第一个对话框并打开第二个对话框，您可以不删除dialog-confirm，而是将custom-dialog元素从paper-dialog中移出。这将在单击按钮时关闭父对话框，并打开代码这里中描述的子对话框。

<html>

<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <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">
</head>

<body>
  <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',
      properties: {
        msgHeader: String,
        msgDismiss: String,
        msgConfirm: String
      },
      show: function() {
        this.$$("paper-dialog").open();
      }
    });
  </script>

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

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

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/38400537

复制

相似问题

问聚合物纸.纸中的对话.对话
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问聚合物纸.纸中的对话.对话EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问聚合物纸.纸中的对话.对话
EN