Question

我为菜单创建了一个简单的聚合物自定义元素。

我知道，聚合物已经有了创建菜单的元素，但我正在创建一个组件，它将在您的网站上显示菜单。

现在，这是我的menu.html（自定义元素）

<link rel="import" href="../bower_components/polymer/polymer.html">    
<link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../bower_components/core-toolbar/core-toolbar.html">
<link rel="import" href="../bower_components/core-menu/core-menu.html">
<link rel="import" href="../bower_components/core-item/core-item.html">
<link rel="import" href="../bower_components/core-header-panel/core-header-panel.html">
<link rel="import" href="../bower_components/core-drawer-panel/core-drawer-panel.html">
<link rel="import" href="../bower_components/core-icons/core-icons.html">
<link rel="import" href="../bower_components/paper-icon-button/paper-icon-button.html">

<polymer-element name="my-menu">
    <template>

        <style>

          core-header-panel {
            background: white;
          }
          core-toolbar {
            background-color: #03A9F4;
          }
          #navheader {
            background-color: #56BA89;
          }
          .content {
            padding: 20px;
          }
          /* drawer is always visible on a wide screen
             so menu button isn't required */
          core-drawer-panel:not([narrow]) #navicon {
            display: none;
          }
        </style>

        <core-drawer-panel id="drawerPanel">

            <core-header-panel drawer>
                <core-toolbar id="navheader">
                    <span>Menu</span>
                </core-toolbar>
                <core-menu>
                    <core-item label="One"></core-item>
                    <core-item label="Two"></core-item>
                </core-menu>
            </core-header-panel>

            <core-header-panel main>
                <core-toolbar id="mainheader">
                    <paper-icon-button id="navicon" icon="menu" on-click="{{togglemenu}}"></paper-icon-button>
                    <span flex>Title</span>
                </core-toolbar>
                <div class="content">
                    If drawer is hidden, press button to display drawer.
                </div>
            </core-header-panel>
      </core-drawer-panel>
    </template>
    <script>
        Polymer('my-menu', {
            ready: function () {
                // alert("hello");

            },
            togglemenu: function () {
                var drawerPanel = document.getElementById('drawerPanel');
                // drawerPanel.togglePanel();
                console.log(drawerPanel);
            }
        });
    </script>
</polymer-element>

现在，

正如您现在所见，当调用 togglemenu 函数时，我想要切换面板，但我无法做到。

无论如何要实现这个目标？

Answer 1

当您在自定义元素内部工作时，可以使用聚合物选择器选择阴影dom中的元素。这将使你的togglemenu功能看起来更像

       togglemenu: function () {
            var drawerPanel = this.$.drawerPanel;
            drawerPanel.togglePanel();
        }

在此函数this.$.drawerPanel中选择与document.getElementById('drawerPanel')相同的方式，除了getElementById正在查看文档级别而不是此元素影子dom。

Polymer Js的自定义菜单元素单击事件

1 个答案: