摘要:指令中自定義的指令之一,顧名思義,就是當鼠標點擊了指令所綁定元素的外部時,就會觸發綁定方法。在鼠標放開觸發事件處理時,通過獲取到他們的對象。使用示例原來的使用方式不受影響,只是添加了多個元素并集作為的功能。指令中的參數學習
都是個人理解,如果發現錯誤,懇請大家批評指正,謝謝。還有我說的會比較啰嗦,因為是以自身菜雞水平的視角來記錄學習理解的過程,見諒。
1.前言產品使用vue+element作為前端框架。在功能開發過程中,難免遇到使用element的組件沒辦法滿足特殊的業務需要,需要對其進行定制,例如要求選擇器的彈出框中,增加搜索過濾(跟目前element的輸入建議不太一樣)。于是想說說之前修改element組件,并定制為業務組件過程中遇到的問題。
ps:因為對某些組件改動很大,所以是直接拷貝了一份源碼,然后再進行修改,但是這樣會遇到挺多問題,建議對于vue組件如果改動不大,只是簡單功能擴展,就直接使用繼承的方式修改。2.clickoutside指令
element中自定義vue的指令之一,clickoutside顧名思義,就是當鼠標點擊了指令所綁定元素的外部時,就會觸發綁定方法。用途就以el-select為例,當選擇器的下拉框展示時,監聽鼠標點擊事件,如果鼠標位置在整個選擇器外部時,進行隱藏下拉框。
2.1使用方式引入Clickoutside.js
import Clickoutside from "element-ui/src/utils/clickoutside"
聲明指令使用
directives: { Clickoutside },
模板中正式使用
2.2實現介紹
簡要說明下原理,首先vue自定義指令本身(不了解可以點擊鏈接查看官網介紹)。主要就是利用vue指令的功能,獲取所綁定元素的dom對象dom_A以及傳遞過來的回調方法fun_A,然后監聽瀏覽器的mousedown和mouseup事件(mousedown作為輔助信息,真正觸發傳遞的回調方法的是mouseup事件),當前事件中鼠標位置對應的dom對象dom_B不屬于dom_A,則代表鼠標點擊了dom_A外部,觸發clickoutside回調方法。
2.3擴展介紹理論上clickoutside只能也只需要綁定一個元素作為inside,但是一些特殊的原因(可能是代碼不夠好),要求clickoutside可以選定多個元素作為inside,當鼠標點擊了這些元素所構成的inside的外部時,再觸發事件。
結合下圖,A與B兩個元素作為一個inside,當鼠標點擊在click1位置時,觸發clickoutside,當鼠標點擊click2或者click3位置時都不觸發clickoutside。
要實現上述功能,就必須獲取到A和B的dom對象,然后在原先鼠標事件的監聽的基礎上,判斷鼠標位置是否都不包含在A和B中,如果是的話再觸發clickoutside。
實現方式為,在A和B的父級parent元素上綁定v-clickoutside:yourClassName="handleClickOutside",在A和B元素上添加同一個class樣式,樣式名稱與指令冒號后面內容一致class="yourClassName"。主要在處理指令綁定時,通過binding.arg即可獲取到A和B共有的class,存放在dom變量中。在鼠標放開觸發事件處理時,通過class獲取到他們的dom對象。
clickoutside原來的使用方式不受影響,只是添加了多個元素并集作為inside的功能。
引入改為自己修改后的clickoutside.js,聲明不變,擴展功能在模板中的使用方式
2.3.2代碼ParentAB
// 引入Vue用以判斷當前運行環境 import Vue from "vue" // element封裝的一些常用dom操作,這里on可以先當做是addEventListener的封裝 import { on } from "element-ui/src/utils/dom" // 所有綁定了clickoutside指令的元素的dom對象數組 const nodeList = [] // 用來做存放于dom對象中clickoutside相關參數對象的key const ctx = "@@clickoutsideContext" let startClick let seed = 0 // 鼠標按下時,記錄此時事件信息 !Vue.prototype.$isServer && on(document, "mousedown", e => (startClick = e)) // 鼠標松開時候,遍歷綁定clickoutside的節點,進行判斷是否在節點外部以觸發回調 !Vue.prototype.$isServer && on(document, "mouseup", e => { nodeList.forEach(node => node[ctx].documentHandler(e, startClick)) }) // 是否在特殊限定范圍內 function ifInExact (exactElms, target1, taget2) { for (let i = 0; i < exactElms.length; i++) { let elm = exactElms[i] if (elm.contains(target1) || elm.contains(taget2) || elm === target1) return true } return false } // 是否有特殊限定范圍 function ifHasExact (el, exactArea) { if (!exactArea) return false return el.getElementsByClassName(exactArea) } function createDocumentHandler (el, binding, vnode) { return function (mouseup = {}, mousedown = {}) { if (!vnode || !vnode.context || !mouseup.target || !mousedown.target || (vnode.context.popperElm && (vnode.context.popperElm.contains(mouseup.target) || vnode.context.popperElm.contains(mousedown.target)))) return let exactElms = ifHasExact(el, el[ctx].exactArea) // 如果是有特殊限定范圍的,則進行判斷當前點擊是否在 限定范圍內 if (exactElms) { if (ifInExact(exactElms, mouseup.target, mousedown.target)) { return } // 無特殊限定范圍,則判斷點擊是否在默認的指令所在范圍內 } else if (el.contains(mouseup.target) || el.contains(mousedown.target) || el === mouseup.target) { return } if (binding.expression && el[ctx].methodName && vnode.context[el[ctx].methodName]) { vnode.context[el[ctx].methodName]() } else { el[ctx].bindingFn && el[ctx].bindingFn() } } } export default { bind (el, binding, vnode) { nodeList.push(el) const id = seed++ el[ctx] = { id, documentHandler: createDocumentHandler(el, binding, vnode), methodName: binding.expression, bindingFn: binding.value, // 特殊限定范圍的class,限定范圍為該class的所有元素的并集 exactArea: binding.arg } }, update (el, binding, vnode) { el[ctx].documentHandler = createDocumentHandler(el, binding, vnode) el[ctx].methodName = binding.expression el[ctx].bindingFn = binding.value // 附加 真正起作用部分 el[ctx].exactArea = binding.arg }, unbind (el) { let len = nodeList.length for (let i = 0; i < len; i++) { if (nodeList[i][ctx].id === el[ctx].id) { nodeList.splice(i, 1) break } } delete el[ctx] } }3.最后
以上就是關于clickoutside的學習和擴展。
1.引用element的popup注意事項,如el-select-menu即el-select中的select-dropdown.vue。
2.使用cropperjs制作頭像裁剪。瀏覽器讀取本地圖片并展示,仿微博頭像排版,裁剪后上傳服務器。
3.vue指令中的參數vnode學習
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/94012.html
摘要:前置知識既然要用的自定義指令,那么肯定要了解一下自定義指令的相關知識啦,關于這部分的內容,看我之前寫過的自定義指令或者直接看官方文檔就可以啦,這里我就不再多講了。 前言 最近搞了畢設,需要實現一個場景,點擊一塊區域,彈出一個編輯區域,點擊頁面的其他地方的時候,這個編輯區域就隱藏,本想想之前寫模態框一樣寫個方法的時候,突然showImg(https://segmentfault.com/...
摘要:使用場景代碼復用和抽象的主要形式是組件當需要對普通元素進行底層操作,此時就會用到自定義指令但是,對于大幅度的變動,還是應該使用組件鉤子函數詳情查閱文檔示例輸入框自動聚焦注冊一個全局自定義指令當被綁定的元素插入到中時聚焦元素下拉菜單點擊 1. 使用場景 代碼復用和抽象的主要形式是組件 當需要對普通 DOM 元素進行底層操作,此時就會用到自定義指令 但是,對于大幅度的 DOM 變動,...
摘要:從數組索引為開始刪除元素,直到對數組元素運用指定方法為為止。對兩個數組的元素分別調用指定方法后,返回以運行結果為判定基準的并集,并集是原始數組元素的并集而不是運行結果的并集。 原文地址:JavaScript30秒, 從入門到放棄之Array(六)博客地址:JavaScript30秒, 從入門到放棄之Array(六) 水平有限,歡迎批評指正 tail Returns all elem...
摘要:區別的是會周期性的把更新的數據寫入磁盤或者把修改操作寫入追加的記錄文件,并且在此基礎上實現了主從同步。存盤可以有意無意的對數據進行寫操作。二的應用場景緩存常常作為數據緩存。如果只用類型,就可以被看作加上持久化特性的。 一、Redis基本概念介紹和特性 1.1 Redis基本概念介紹 ????showImg(https://segmentfault.com/img/bVWpvd?w=50...
閱讀 777·2023-04-26 03:04
閱讀 2860·2021-11-15 18:10
閱讀 1189·2021-09-03 10:28
閱讀 1126·2019-08-30 15:53
閱讀 877·2019-08-30 12:45
閱讀 1951·2019-08-30 11:03
閱讀 2862·2019-08-29 14:01
閱讀 2926·2019-08-28 18:24