防止纸质对话框自动关闭

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

您不需要删除肯定/否定属性，因为它们用于布局。 Polymer 对话框文档是错误的（我已经打开了一个 GH 问题）closeSelector 的默认值是 '[dismissive],[affirmative]' 而不是 ""，您只需将 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>