paper-drawer-panel 的 closeDrawer() 未使用自定义 header 元素关闭

Question

更新我可以用 document.querySelector('paper-drawer-panel').forceNarrow = true; 关闭抽屉。我本来打算删除这个问题，但也许我会把它留着看看是否有办法用 closeDrawer()

正确地做到这一点

我编写了自己的自定义 header，它没有使用任何论文 header 行为。这只是它自己的自定义元素 html 样式 header，没有任何行为或功能。

我实现了 paper-drawer-panel，它与我的自定义 header 配合得很好。但是，我无法让 closeDrawer() 关闭抽屉。我看到函数本身是 function () { this.selected = 'main' }，但不确定它如何应用于 paper-drawer-panel 的内部代码。

如何让paper-drawer-panel的closeDrawer()关闭抽屉？

index.html:

  <template is="dom-bind" id="app">
    <paper-drawer-panel>
      <div drawer>
        <drawer-custom></drawer-custom>
      </div>
      <div main>
        <header-custom></header-custom>
        <video-selection data-route="home" tabindex="-1"></video-selection>
      </div>
    </paper-drawer-panel>
  </template>

app/elements/drawer-custom.html:

<dom-module id="drawer-custom">
  <template>
    <style include="iron-flex iron-flex-alignment">
     :host {
       background-color: var(--brown-color);
       height: 1000px;
       width: 100%;
       overflow-x: hidden;
       outline: none;
       display: block;
       padding-right: 1px;
        --iron-icon-height: 42px;
        --iron-icon-width: 42px;
     }

    .v-center {
      @apply(--layout-vertical);
      @apply(--layout-center-center);
    }



    #close-drawer {
      height: 130px;
      width: 100%;
      background-color: var(--pink-color);
      padding-right: 1px;
    }

    #contact {
      background-color: #a9483b;
      height: 130px; 
      width: 100%;
      padding-right: 1px;
    }

    </style>
    <div on-click="_closeDrawer" id="close-drawer" class="v-center">
      <iron-icon src='../images/menu-button-close.svg'></iron-icon>
    </div>
    <div id="contact">
      contact
    </div>
  </template>

  <script>
    Polymer({
      is: 'drawer-custom',
      _closeDrawer: function() {
        document.querySelector('paper-drawer-panel').closeDrawer();
      } 
    })
  </script>
</dom-module>

Answer 1

解决方法:

当我将 <paper-icon-button> 作为子项添加到 paper-drawer-panel 时，函数 closeDrawer() 起作用了。

paper-drawer-panel 的 closeDrawer() 未使用自定义 header 元素关闭

paper-drawer-panel's closeDrawer() not closing with custom header element

polymer

polymer-1.0