防止纸对话框自动关闭。

Question

你好：

我在页面中有一个paper-dialog元素：

<paper-dialog ... id="autom_desc_dialog" autoCloseDisabled> 
    ...
    <paper-button ... id="automatizar" affirmative autofocus disabled></paper-button>
</paper-dialog>

我有一个事件侦听器，它处理paper-button单击：

var auto_btn = querySelector('#automatizar');
auto_btn.on["click"].listen((Event e) {
    // Some AJAX stuff
});

我想要的是，在某些情况下，为了防止对话框关闭，我尝试了event.preventDefault()、event.stopImmediatePropagation()、event.stopPropagation()，但没有成功。

提前谢谢。

Answer 1

您不需要删除肯定/否定属性，因为它们用于布局。聚合物对话框文档是错误的(我打开了GH问题)，closeSelector的默认值是‘不屑一顾，肯定’而不是“，您只需要将closeSelector设置为""，并且它不会在单击按钮时关闭对话框。

Answer 2

您只需要从按钮中删除affirmative属性，就可以完全控制行为。

app-element.dart

import 'package:polymer/polymer.dart';

import 'dart:html';
import 'package:paper_elements/paper_dialog.dart';
/**
 * A Polymer app-element element.
 */
@CustomTag('app-element')

class AppElement extends PolymerElement {

  /// Constructor used to create instance of AppElement.
  AppElement.created() : super.created() {
  }

  void openClickHandler(Event e) {
    print(e);
    ($['autom_desc_dialog'] as PaperDialog).opened = true;
  }

  void closeClickHandler(Event e){
    if(true /* some condition */) {
      ($['autom_desc_dialog'] as PaperDialog).opened = false;
    }
  }

}

app_element.html

<!-- import polymer-element's definition -->
<link rel="import" href="../../packages/polymer/polymer.html">
<link rel="import" href="../../packages/paper_elements/paper_dialog.html">
<link rel="import" href="../../packages/paper_elements/paper_button.html">

<polymer-element name="app-element">
  <template>
    <style>
      :host {
        display: block;
      }
    </style>
    <paper-dialog id="autom_desc_dialog" autoCloseDisabled>
      <div>paper dialog</div>
      <paper-button id="automatizar" autofocus label="close" on-click="{{closeClickHandler}}"></paper-button>
    </paper-dialog>

    <paper-button id="open" autofocus label="open" on-click="{{openClickHandler}}"></paper-button>
  </template>
  <script type="application/dart" src="app_element.dart"></script>
</polymer-element>