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>

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

2 个答案: