如何隱藏下拉菜單，如果我們點擊菜單中的vuejs

我正在使用vuejs中的dropdown菜單組件來製作正常的下拉菜單。我的代碼是dropdown成分是：如何隱藏下拉菜單，如果我們點擊菜單中的vuejs

<template> 
    <span class="dropdown" :class="{shown: state}"> 
     <a href="#" @click.prevent="toggleDropdown" class="dropdown-toggle">toggle menu</a> 
      <div class="dropdown-menu" v-show="state"> 
       <ul class="list-unstyled"> 
        <slot></slot> 
       </ul> 
      </div> 
     </transition> 
    </span> 
</template> 

<script> 
export default { 
    name: 'dropdown', 
    data() { 
     return { 
      state: false 
     } 
    }, 
    methods: { 
     toggleDropdown (e) { 
      this.state = !this.state; 
     } 
    } 
} 
</script>

現在我通過在模板使用下列代碼導入dropdown組件在不同的地方我VUE應用

<dropdown> 
    <li> 
     Action 
    </li> 
</dropdown>

現在是工作的罰款，但我希望只有一個下拉列表應該同時處於活動狀態。

我已經做了很少的研究，發現我可以使用像https://github.com/davidnotplay/vue-my-dropdown這樣的插件，但我不想使用它。再次，我也研究了上述示例如何工作，但我希望以這種方式實現此下拉功能，以便我的dropdown組件負責處理與下拉菜單相關的所有事件。 那麼你能幫我實現嗎？

來源

2017-09-04 Rakesh Soni

看一看VUE-clickaway。（Link）

有時你需要檢測的元素之外的點擊（關閉模態窗口或隱藏下拉列表中選擇）。沒有原生的事件，Vue.js也不會覆蓋你。這就是vue-clickaway存在的原因。請在進一步閱讀之前查看演示。

來源

2017-09-04 14:24:28

雖然此鏈接可能會回答問題，但最好在此處包含答案的基本部分，並提供供參考的鏈接。如果鏈接頁面更改，則僅鏈接答案可能會失效。 - [來自評論]（/ review/low-quality-posts/17231652） –

@Shubham它可能會解決這個問題，但我想盡量減少對任何外部組件/插件/資源的依賴。無論如何，我會盡力實現類似的功能，謝謝 –

您可以使用blur事件，例如，如果添加了一個方法：

close() { 
    setTimeout(() => { 
     this.state = false; 
    }, 200); 
}

，併爲您的鏈接blur事件：

<a href="#" @click.prevent="toggleDropdown" @blur="close">toggle menu</a>

然後下拉會得到隱藏的，只要您的曲柄連桿失去焦點。 setTimeout是必要的，因爲Javascript點擊事件發生在模糊之後，這會導致您的下拉鍊接無法點擊。要解決此問題，請稍微延遲菜單隱藏。

來源

2017-09-04 14:56:32

是的，但這可能不是完美的解決方案。此外，我們必須將blur事件綁定到父包裝器，因爲用戶可能需要一些毫秒的時間來從下拉菜單中選擇操作 –

如何隱藏下拉菜單，如果我們點擊菜單中的vuejs

回答

相關問題