資訊專欄INFORMATION COLUMN
摘要：前置知識既然要用的自定義指令，那么肯定要了解一下自定義指令的相關(guān)知識啦，關(guān)于這部分的內(nèi)容，看我之前寫過的自定義指令或者直接看官方文檔就可以啦，這里我就不再多講了。
前言 最近搞了畢設(shè)，需要實(shí)現(xiàn)一個(gè)場景，點(diǎn)擊一塊區(qū)域，彈出一個(gè)編輯區(qū)域，點(diǎn)擊頁面的其他地方的時(shí)候，這個(gè)編輯區(qū)域就隱藏，本想想之前寫模態(tài)框一樣寫個(gè)方法的時(shí)候，突然
覺得可以嘗試用 vue 相關(guān)的東西優(yōu)雅的解決這個(gè)事情，然后就學(xué)了下面的自定義指令了。
既然要用 Vue 的自定義指令，那么肯定要了解一下 Vue 自定義指令的相關(guān)知識啦，關(guān)于這部分的內(nèi)容，看我之前寫過的《Vue 自定義指令》或者直接看官方文檔就可以啦，這里我就不再多講了。
解決思路這個(gè)按照我之前寫模態(tài)框的經(jīng)驗(yàn)，我的做法是給 document 綁定一個(gè)點(diǎn)擊事件，然后判斷觸發(fā)點(diǎn)擊事件的那個(gè)元素是不是模態(tài)框所在的目標(biāo)區(qū)域，如果不是，那么就觸發(fā)隱藏事件?？匆幌麓a吧
$(document).mouseup(function(e){
var _con = $(" 目標(biāo)區(qū)域 "); // 設(shè)置目標(biāo)區(qū)域
if(!_con.is(e.target)){ // 判斷是不是目標(biāo)區(qū)域
some code... // 功能代碼
}
});
實(shí)現(xiàn)
有了思路，實(shí)現(xiàn)起來就簡單了。就直接放定義的代碼啦
const clickOutside = {
// 初始化指令
bind(el, binding, vnode) {
function clickHandler(e) {
// 這里判斷點(diǎn)擊的元素是否是本身，是本身，則返回
if (el.contains(e.target)) {
return false;
}
// 判斷指令中是否綁定了函數(shù)
if (binding.expression) {
// 如果綁定了函數(shù) 則調(diào)用那個(gè)函數(shù)，此處binding.value就是handleClose方法
binding.value(e);
}
}
// 給當(dāng)前元素綁定個(gè)私有變量，方便在unbind中可以解除事件監(jiān)聽
el.__vueClickOutside__ = clickHandler;
document.addEventListener("click", clickHandler);
},
update() {},
unbind(el, binding) {
// 解除事件監(jiān)聽
document.removeEventListener("click", el.__vueClickOutside__);
delete el.__vueClickOutside__;
},
};
directives: {clickOutside},
接下來就可以就可以在組件內(nèi)直接使用啦
我實(shí)現(xiàn)的效果
然后關(guān)于這個(gè)點(diǎn)擊元素外觸發(fā)某個(gè)事件，如果還有啥其他優(yōu)雅的方式的話，下面留言分享一下哈。
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/99483.html
摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護(hù)。隱藏四事件之前說了一些關(guān)于事件的指令，這里詳細(xì)學(xué)習(xí)一下事件的相關(guān)知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進(jìn)行數(shù)據(jù)綁定，顯示在頁面中，也稱為語法。 一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護(hù)。 Vue有以下特點(diǎn)： 是一個(gè)構(gòu)建用戶界面的框架 是一...
摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護(hù)。隱藏四事件之前說了一些關(guān)于事件的指令，這里詳細(xì)學(xué)習(xí)一下事件的相關(guān)知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進(jìn)行數(shù)據(jù)綁定，顯示在頁面中，也稱為語法。 一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護(hù)。 Vue有以下特點(diǎn)： 是一個(gè)構(gòu)建用戶界面的框架 是一...
摘要：一介紹也稱為，讀音類似，錯誤讀音，由華人尤雨溪開源并維護(hù)。隱藏四事件之前說了一些關(guān)于事件的指令，這里詳細(xì)學(xué)習(xí)一下事件的相關(guān)知識。還有一些其他鍵盤事件，具體參考官方文檔。模板就是，用來進(jìn)行數(shù)據(jù)綁定，顯示在頁面中，也稱為語法。 一、Vue.js介紹 Vue.js也稱為Vue，讀音類似view，錯誤讀音v-u-e，由華人尤雨溪開源并維護(hù)。 Vue有以下特點(diǎn)： 是一個(gè)構(gòu)建用戶界面的框架 是一...
摘要：自定義指令定義直接看官網(wǎng)的介紹吧覺得官方文檔說的很清楚了，所以我基本都是抄他的了。除了核心功能默認(rèn)內(nèi)置的指令和，也允許注冊自定義指令。然而，有的情況下，你仍然需要對普通元素進(jìn)行底層操作，這時(shí)候就會用到自定義指令。 前言 最近搞了畢設(shè)，需要實(shí)現(xiàn)一個(gè)場景，點(diǎn)擊一塊區(qū)域，彈出一個(gè)編輯區(qū)域，點(diǎn)擊頁面的其他地方的時(shí)候，這個(gè)編輯區(qū)域就隱藏，本想想之前寫模態(tài)框一樣寫個(gè)方法的時(shí)候，突然showImg(...
摘要：指令中自定義的指令之一，顧名思義，就是當(dāng)鼠標(biāo)點(diǎn)擊了指令所綁定元素的外部時(shí)，就會觸發(fā)綁定方法。在鼠標(biāo)放開觸發(fā)事件處理時(shí)，通過獲取到他們的對象。使用示例原來的使用方式不受影響，只是添加了多個(gè)元素并集作為的功能。指令中的參數(shù)學(xué)習(xí) 都是個(gè)人理解，如果發(fā)現(xiàn)錯誤，懇請大家批評指正，謝謝。還有我說的會比較啰嗦，因?yàn)槭且宰陨聿穗u水平的視角來記錄學(xué)習(xí)理解的過程，見諒。 1.前言 產(chǎn)品使用vue+elem...
閱讀 2515·2021-09-09 09:33
閱讀 2876·2019-08-30 15:56
閱讀 3159·2019-08-30 14:21
閱讀 911·2019-08-30 13:01
閱讀 874·2019-08-26 18:27
閱讀 3594·2019-08-26 13:47
閱讀 3465·2019-08-26 10:26
閱讀 1597·2019-08-23 18:38
