您好,登錄后才能下訂單哦!
在項目中往往會有這樣的需求: 彈出框(或Popover)在 show 后,點擊空白處可以將其 hide。
針對此需求,整理了三種實現(xiàn)方式,大家按實際情況選擇。
當(dāng)然,我們做項目肯定會用到 UI 框架,常見的 Element 中的組件提供了這樣的方法。
但是,就算使用框架,有些時候還是要用到的,比如:
Element 中的 Popover,當(dāng)我們想使用手動方式(trigger 觸發(fā)方式為 manual時)控制它的 show & hide 的時候,就要自己實現(xiàn)這個功能啦。
第一種方式:最普通的手動監(jiān)聽判斷
<span ref="projectButton"> <el-popover v-model="visible" trigger="manual" placement="bottom" @show="show" @hide="hide"> <p>啦啦啦</p> <el-button slot="reference" type="primary" @click="visible = !visible">show</el-button> </el-popover> </span>
data () { return { visible: false } }, methods: { show () { document.addEventListener('click', this.hidePanel, false) }, hide () { document.removeEventListener('click', this.hidePanel, false) }, hidePanel (e) { if (!this.$refs.projectButton.contains(e.target)) { this.visible = false this.hide() } } }
上面就是在 Popover show 的時候監(jiān)聽 document 的 click 事件,觸發(fā)進入 hidePanel 方法,判斷當(dāng)前點擊的 el 是否在 Popover 內(nèi)部,如果不在,則手動 hide Popover ,并且移除監(jiān)聽事件。
這個還是蠻好理解的,我使用的也是這種方式,因為我的項目中需要這種需求的很少(好吧,就一個地方),所以我采用了這種方式。
第二種方式: 指令
<template> <div> <div class="show" v-show="show" v-clickoutside="handleClose"> 顯示 </div> </div> </template> <script> const clickoutside = { // 初始化指令 bind(el, binding, vnode) { function documentHandler(e) { // 這里判斷點擊的元素是否是本身,是本身,則返回 if (el.contains(e.target)) { return false; } // 判斷指令中是否綁定了函數(shù) if (binding.expression) { // 如果綁定了函數(shù) 則調(diào)用那個函數(shù),此處binding.value就是handleClose方法 binding.value(e); } } // 給當(dāng)前元素綁定個私有變量,方便在unbind中可以解除事件監(jiān)聽 el.__vueClickOutside__ = documentHandler; document.addEventListener('click', documentHandler); }, update() {}, unbind(el, binding) { // 解除事件監(jiān)聽 document.removeEventListener('click', el.__vueClickOutside__); delete el.__vueClickOutside__; }, }; export default { name: 'HelloWorld', data() { return { show: true, }; }, directives: {clickoutside}, methods: { handleClose(e) { this.show = false; }, }, }; </script> <!-- Add "scoped" attribute to limit CSS to this component only --> <style scoped> .show { width: 100px; height: 100px; background-color: red; } </style>
上面這種是網(wǎng)上比較火的一種方式(實際我沒有測試過),其實思路還是那個思路 (給document增加一個click事件監(jiān)聽,當(dāng)發(fā)生click事件的時候判斷是否點擊的當(dāng)前對象,不是就隱藏),優(yōu)點就是可以封裝成全局/局部的指令,可多處使用。
下面簡單介紹下 vue 指令
一個指令定義對象可以提供如下幾個鉤子函數(shù) (均為可選):
第三種方式:遮罩
<template> <div> <div class="mask" v-if="showModal" @click="showModal=false"></div> <div class="pop" v-if="showModal"> <button @click="showModal=false" class="btn">點擊出現(xiàn)彈框</button> </div> <button @click="showModal=true" class="btn">點擊出現(xiàn)彈框</button> </div> </template> <script> export default { data() { return { showModal: false }; } }; </script> <style scoped> .mask { background-color: #000; opacity: 0.3; position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1 } .pop { background-color: #fff; position: fixed; top: 100px; left: 300px; width: calc(100% - 600px); height:calc(100% - 200px); z-index: 2 } .btn { background-color: #fff; border-radius: 4px; border: 1px solid blue; padding: 4px 12px; } </style>
上面這個就是添加一個看不見的遮罩替代 document ,點擊遮罩就隱藏。但是要注意:mask(遮罩)層的層級(z-index)要比彈出的pop的層級低。
總結(jié)
以上所述是小編給大家介紹的Vue 實現(xiàn)點擊空白處隱藏某節(jié)點的三種方式,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回復(fù)大家的。在此也非常感謝大家對億速云網(wǎng)站的支持!
如果你覺得本文對你有幫助,歡迎轉(zhuǎn)載,煩請注明出處,謝謝!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。