Question

我使用Polymer1完成了以下操作。在Polymer2.0中执行相同操作不会触发button的自动下拉菜单。请有人能告诉我该怎么做。这似乎与Shadow DOM有关。

在Polymer1中，index.html有dom ='shadow'和<content>代码而不是<slot>，它会转到dReadyDynamicRightMenuReady和触发下拉列表。但是在Polymer2.0中，它也会进入此功能，并且不会触发下拉列表。

<!-- this is in my-spxl Polymer2.0 -->
<paper-menu-button class="userMenuPositionClass">
<paper-icon-button icon="menu" class="dropdown-trigger"></paper-icon-button>
<paper-dropdown-menu class="dropdown-content">
    <iron-selector selected="[[choice]]" attr-for-selected="mychoice" role="navigation">
       <template id="" is="dom-repeat" items="[[dReadyDynamicRightMenuReady]]" as="menuOption">
           <paper-item>... </paper-item>
       </template>
    </iron-selector>
</paper-dropdown-menu>
</paper-menu-button>

<paper-button class=""> <img on-tap="openRightMenuFromPhoto" src="[[user.photoURL]]"> </paper-button>

脚本： openRightMenuFromPhoto() { var usersMenuButton = this.$.userMenuIconId; usersMenuButton.click(function(event) { dReadyDynamicRightMenuReady = [ { "myChoice": "spx21", "myHref": "/spx21", "myOptionValue": "chats" } ]; return dReadyDynamicRightMenuReady; }) }

Answer 1

您的代码中几乎没有错误：

处理和解雇事件：

单击侦听器位于函数内部。永远不会被称为。将事件监听器放在1或ready()上。有关如何执行此操作的详细信息click here。
设置属性值：

在函数内设置属性值并返回它不会设置它。使用 connectedCallback并通知更改。或者，如果是数组/对象，请使用polymer array mutation methods。
阅读this.property = value的{{3}}：

而不是paper-menu-button在文档中使用class='dropdown-trigger'。

另外，尝试创建documentation。

在Polymer2.0中实现动态下拉菜单。适用于Polymer1.0但不适用于Polymer2.0

1 个答案: