Polymer组件添加灰色背景：使用IronOverlayBehavior/PaperDialogBehavior遇阻

嘿，我来帮你搞定这个背景层的问题！你想用iron-overlay-behavior或者paper-dialog-behavior来实现带灰色背景的可关闭窗口，但是在继承mixin的时候出了问题对吧？我来一步步给你捋清楚正确的写法，还有可能踩的坑。

首先，确保正确导入行为文件 #

不管用哪个behavior，第一步都是要把对应的文件导入到你的元素里：

如果你用IronOverlayBehavior（Polymer 2.x） #

<link rel="import" href="/bower_components/iron-overlay-behavior/iron-overlay-behavior.html">

如果你用PaperDialogBehavior（Polymer 2.x） #

<link rel="import" href="/bower_components/paper-dialog-behavior/paper-dialog-behavior.html">

要是你用的是Polymer 3.x（ES modules），导入方式改成这样：

// IronOverlayBehavior
import { IronOverlayBehavior } from '@polymer/iron-overlay-behavior/iron-overlay-behavior.js';
// PaperDialogBehavior
import { PaperDialogBehavior } from '@polymer/paper-dialog-behavior/paper-dialog-behavior.js';

正确的元素定义语法 #

这部分是你可能出错的地方，要注意mixin的写法，还有必须调用super.ready()来触发behavior的初始化逻辑。

用IronOverlayBehavior的完整示例（Polymer 2.x） #

class MyCustomOverlay extends Polymer.mixinBehaviors([Polymer.IronOverlayBehavior], Polymer.Element) {
  static get is() { return 'my-custom-overlay'; }

  static get template() {
    return `
      <style>
        :host {
          display: block;
          padding: 20px;
          background: white;
          border-radius: 4px;
        }
      </style>
      <button on-click="_closeWindow">关闭</button>
      <!-- 你的窗口内容 -->
    `;
  }

  ready() {
    super.ready(); // 这一步非常重要！不能丢
    this.withBackdrop = true;
    // 可选：点击背景就关闭窗口
    this.backdropClickAction = 'close';
  }

  _closeWindow() {
    this.close(); // IronOverlayBehavior提供的关闭方法
  }
}
customElements.define(MyCustomOverlay.is, MyCustomOverlay);

用PaperDialogBehavior的完整示例（Polymer 2.x） #

注意PaperDialogBehavior已经封装了PaperDialogBehaviorImpl和接口，所以直接用它就行，不用单独写Impl：

class MyCustomDialog extends Polymer.mixinBehaviors([Polymer.PaperDialogBehavior], Polymer.Element) {
  static get is() { return 'my-custom-dialog'; }

  static get template() {
    return `
      <style>
        :host {
          padding: 20px;
        }
      </style>
      <paper-button on-click="_closeDialog">关闭</paper-button>
      <!-- 你的对话框内容 -->
    `;
  }

  ready() {
    super.ready();
    this.withBackdrop = true;
  }

  _closeDialog() {
    this.close(); // PaperDialogBehavior继承了IronOverlay的方法
  }
}
customElements.define(MyCustomDialog.is, MyCustomDialog);

常见的坑要避开 #

• 忘记调用super.ready()：这会导致behavior的内部初始化逻辑不执行，背景层自然不会出现。
• 导入路径错误：要确认bower_components（或node_modules）里的文件路径是否正确，路径错了behavior加载不出来，自然会报错。
• Polymer版本不匹配：如果是3.x版本，一定要用ES模块的import方式，不能再用HTML导入了。
• 没有正确注册元素：最后一定要用customElements.define()把你的元素注册到自定义元素注册表中。

使用示例 #

在你的页面或父元素里调用这个窗口：

<my-custom-overlay id="myOverlay"></my-custom-overlay>
<button on-click="_openOverlay">打开窗口</button>

<script>
  _openOverlay() {
    this.$.myOverlay.open(); // IronOverlayBehavior提供的打开方法
  }
</script>

这样设置后，你的窗口打开时就会自动出现灰色的背景层啦！

内容的提问来源于stack exchange，提问作者Thad