当用户点击并在其后面创建叠加时，请关注自定义元素

Question

我有一个自定义元素，只要用户点击它就会输入我要关注它并在其他元素上创建叠加，当用户点击div之外我想删除叠加层。

我试图使用iron-overlay-behavior但不能实现预期的行为。

<custom-element 
    with-backdrop 
    scroll-action="lock"
    clicked="{{isClicked}}"
></decision-view>

显示的所有示例主要是针对paper-dialog但是如何使用iron-overlay-behavior作为我自己的自定义元素？

Answer 1

iron-overlay-behavior对于模态对话似乎意味着更多，你想要完成的是不同的东西（例如，模态对话框一次只显示一个，并且在返回到正常的应用程序/网站行为之前需要用户输入）。所以我认为这种行为的一个自然现象是禁用其他任何焦点！

当你说：

在其他元素上创建叠加层

那是什么意思？只是在他们不可见的地方涂上白色？

Answer 2

上周我有类似的问题。见Showing a gray backdrop with a mixin 。

有关演示，请参阅this pen的Makha：

<dom-module id="parent-component">
  <template>
    <style>
      :host {
        display: block;
        margin: 10px auto auto auto;
        border: 2px solid gray;
        border-radius: 8px;
        background-color: white;
        padding: 5px;
        width: 100px;
      }
      [hidden] {
        display: none;
      }
      paper-button {
        background-color: lightblue;
      }
      #placeholder {
        width: 120px;
        height: 150px;
      }
    </style>
    <div>Try me.</div>
    <paper-button on-tap="_doTap">Push</paper-button>
    <div id="placeholder" hidden></div>
  </template>
  <script>
    class ParentComponent extends Polymer.Element {
      static get is() { return 'parent-component'; }
      static get properties() {
        return {
          mychild: {
            type: Object
          }
        }
      }
      _doTap(e) {
        let x = (e.detail.x - 50) + 'px';
        let y = (e.detail.y - 50) + 'px';
        this.mychild = new MyChild();
        this.mychild.addEventListener('return-event', e => this._closeChild(e));
        this.$.placeholder.style.position = 'absolute';
        this.$.placeholder.appendChild(this.mychild);
        this.$.placeholder.style.left = x;
        this.$.placeholder.style.top = y;
        this.$.placeholder.removeAttribute('hidden');
        this.mychild.open();
      }
      _closeChild(e) {
        console.log('Child says '+e.detail);
        this.mychild.remove();
        this.mychild = null;
        this.$.placeholder.setAttribute('hidden', '');
      }
    }
    customElements.define(ParentComponent.is, ParentComponent);
  </script>
</dom-module>

<parent-component></parent-component>

<dom-module id="my-child">
  <template>
    <style>
      :host {
        display: block;
        margin: 10px auto auto auto;
        border: 2px solid gray;
        border-radius: 8px;
        background-color: white;
        padding: 15px;
      }
      paper-button {
        background-color: lightgray;
      }
    </style>
    <div>I'm a child.</div>
    <paper-button on-tap="_doTap">Close</paper-button>
  </template>
  <script>
    class MyChild extends Polymer.mixinBehaviors([Polymer.IronOverlayBehavior], Polymer.Element) {
      static get is() { return 'my-child'; }
      static get properties() {
        return {
         withBackdrop: {
          type: Boolean,
          value: true
         }
        }
      }
      ready() {
        super.ready();
        console.log("Daddy?");
      }
      _doTap(e) {
        this.dispatchEvent(new CustomEvent('return-event', 
                                           { detail: 'Bye!', bubbles: true, composed: true }));
      }
    }
    customElements.define(MyChild.is, MyChild);
  </script>
</dom-module>