在Polymer2.0中實現動態下拉菜單。適用於Polymer1.0，但不適用於Polymer2.0

我使用Polymer1完成了以下操作。在Polymer2.0中執行相同操作不會觸發button的自動下拉菜單。請有人告訴我該怎麼做。這似乎與Shadow DOM有關。在Polymer2.0中實現動態下拉菜單。適用於Polymer1.0，但不適用於Polymer2.0

在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; }) }

來源

2017-08-27 verNsíon1

對不起，有些標籤沒有打印在上面。勘誤表：在Polymer1中，index.html具有dom ='shadow'，而內容標記而不是插槽（用於Polymer2.0），... –

您是否也可以提供腳本部分？ – Ofisora

感謝編輯Ofisora。提供腳本。 –

有在你的代碼一些錯誤：

手柄和觸發事件：

點擊監聽器是在函數內部。那永遠不會被調用。將事件監聽器放在ready()或connectedCallback上。有關如何執行此操作的更多信息，請參閱click here。
設置屬性值：

內部功能設置屬性值並返回它不會設置。使用 this.property = value並通知更改。或者，如果它是一個數組/對象使用polymer array mutation methods。
閱讀paper-menu-buttondocumentation的：在文檔

代替class='dropdown-trigger'使用slot。

另外，嘗試創建一個Minimal, Complete, and Verifiable example。

來源

2017-08-28 01:10:02 Ofisora

非常感謝你的Ofisora！其他內容與菜單重疊，但是這起作用。將使最小等，謝謝！ –

在Polymer2.0中實現動態下拉菜單。適用於Polymer1.0，但不適用於Polymer2.0

回答

相關問題