小編這次要給大家分享的是詳解Vue如何實現顯示/隱藏層，文章內容豐富，感興趣的小伙伴可以來了解一下，希望大家閱讀完這篇文章之后能夠有所收獲。
問題描述：
一個Icon點擊出現菜單，點擊菜單區域外任何區域菜單收起。
何為優雅的去解決上述問題？
問題解決思路：
document的事件添加
HTML
<template>
<div class="dir">
<!-- 按鈕，特別注意@click.stop用于禁止消息冒泡 -->
<span title="排序" id="sort_by" @click.stop="onSortClick()" class="icons">按鈕</span><br/>
<!-- 菜單 v-show設置變量 showSortmenu，style的內容要一開始就寫上！
此處不確定是否是個BUG，不初始style時顯示不正確
-->
<ul class="menu" id="sort_by_menu" v-show="showSortmenu" >
<li sort="title">
<span>標題</span>
</li>
<li sort="lastModify">
<span>最后修改時間</span>
</li>
<li sort="free">
<span>自定義排序</span>
</li>
</ul>
</div>
</template>JavaScript
<script>
export default {
name: "demo2",
data() {
return {
showSortmenu: false
};
},
props: {},
methods: {
//接收按鈕點擊事件@click.stop，禁止冒泡
onSortClick: function() {
//設置bool值，
this.showSortmenu = !this.showSortmenu;
//要特別注意這里，只有菜單顯示的時候才會監聽全局點擊事件
//并且，要設置為：vue的方法，不能扔到export代碼段外面去。
//要切記`this`這個變量對應的實例是誰
if (this.showSortmenu) {
document.addEventListener("click", this.onGlobalClick);
}
},
//全局監聽點擊事件
onGlobalClick(e) {
//判斷全局被點中的控件的className，不同就是菜單外點擊
if (e.target.className != "sort_by_menu") {
this.showSortmenu = false;
//這里要注意啊!!!!一定要記得移除監聽事件?。。。?！
document.removeEventListener("click", this.onGlobalClick);
}
}
},
mounted() {},
};
</script>看完這篇關于詳解Vue如何實現顯示/隱藏層的文章，如果覺得文章內容寫得不錯的話，可以把它分享出去給更多人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
