Vue 實現顯示/隱藏層的思路(加全域性點選事件)
阿新 • • 發佈:2020-01-09
問題描述:
一個Icon點擊出現選單,點選選單區域外任何區域選單收起。
何為優雅的去解決上述問題?
- 儘可能的採用vue來解決問題
- 儘可能少的與原生物件發生互動
- 程式碼乾淨、易懂
問題解決思路:
- 通過Vue的v-show指令決定選單的顯示、隱藏。
- 通過Document的全域性點選事件判斷是否該收起
- 需要優雅的解決幾個問題:
- 禁止點選事件冒泡。採用VUE的@click.stop來解決問題,請參考下方程式碼
- 優雅且安全的移除全域性事件監聽(只有選單彈出的時候才去監聽)
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" style="display: block;"> <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 實現顯示/隱藏層的思路(加全域性點選事件),希望對大家有所幫助!