原始實現

下面是兩種常見的模態框的實現方式

方案一：默認 click 都是放在冒泡階段，只要在內容區域上添加 click 的阻止冒泡即可

<div @click='close'> <!-- 阻止冒泡 --> <div @click.stop>modal content</div></div>

方案二：通過代碼判斷點擊觸發的 DOM 是否在內容區域內

<div @click='handleClick'> <div ref='content'>modal content</div></div>handleClick (e) { let clickOut = true let temp = e.target do { if (temp === this.$refs.content) { clickOut = false break } temp = temp.parentElement } while (temp !== document.documentElement) console.log(clickOut)}

指令實現

上面的代碼可以解決全屏的模態框點擊外部區域關閉。但是還有一種 Pop 的彈出，這種彈出的外部區域不在本組件內，想要實現這種彈出的點擊外部區域關閉用上面的方式二也是可以的，只需把 mounted 階段把 handleClick 事件添加到 body，在 beforeDestroy 上解綁 body 上的點擊時間就就可以了。

如果多個組件需要實現這點擊外部區域關閉的效果，可以通過 Vue 的指令來進行封裝

實現彈窗

<div class='cover'> <div v-out-click='close'>modal content</div></div>

實現彈出

<button @click='popIsShow = true'>顯示氣泡</button><div v-if='popIsShow' v-out-click='closePop'>I’m pop text</div>

指令代碼的具體內容如下。有一點比較難受的是指令里面沒有地方能存放變量，只好把把這些變量放到了 DOM 上了。還有就是在使用的時候要加上v-的前綴，指令的名字不用帶上v-

import outClick from ’./directive/out-click.js’Vue.directive(outClick.name, outClick)const KEY_OUT = ’_out_click’const KEY_OUT_EVENT = ’_out_click_event’const KEY_IN = ’_in_click’const KEY_FLAG = ’_in_out_flag’function removeEvent(el, binding, vnode) { el.removeEventListener(’click’, el[KEY_IN], false) window.removeEventListener(’click’, el[KEY_OUT], false) delete el[KEY_IN] delete el[KEY_OUT] delete el[KEY_OUT_EVENT] delete el[KEY_FLAG]}function initEvent(el, binding, vnode) { // setTimeout 0: 忽略點擊外部的按鈕初始化該組件時，觸發的origin click setTimeout(() => { el[KEY_OUT] = () => outClick(el) el[KEY_IN] = () => inClick(el) el[KEY_OUT_EVENT] = binding.value el.addEventListener(’click’, el[KEY_IN], false) window.addEventListener(’click’, el[KEY_OUT], false) }, 0)}function inClick(el) { // 通過事件捕獲的順序作為標志位 // 最好不要使用阻止冒泡來實現，那樣會影響其他的click無法觸發 el[KEY_FLAG] = ’1’}function outClick(el) { if (!el[KEY_FLAG] && el[KEY_OUT_EVENT]) { el[KEY_OUT_EVENT]() } delete el[KEY_FLAG]}export default { name: ’out-click’, update: (el, binding, vnode) => { if (binding.value === binding.oldValue) { return } removeEvent(el, binding, vnode) initEvent(el, binding, vnode) }, bind: initEvent, unbind: removeEvent}

以上就是Vue指令實現OutClick的示例的詳細內容，更多關于Vue指令實現OutClick的資料請關注好吧啦網其它相關文章！