您好,登錄后才能下訂單哦!
這篇文章主要講解了“elementui中的clickoutside點(diǎn)擊空白隱藏元素怎么實(shí)現(xiàn)”,文中的講解內(nèi)容簡單清晰,易于學(xué)習(xí)與理解,下面請大家跟著小編的思路慢慢深入,一起來研究和學(xué)習(xí)“elementui中的clickoutside點(diǎn)擊空白隱藏元素怎么實(shí)現(xiàn)”吧!
點(diǎn)擊div,closeBox方法不會執(zhí)行,點(diǎn)擊空白才執(zhí)行
<template> <div class="app"> <div v-show="isShowBox" v-clickoutside="closeBox" class="box"></div> </div> </template> <script> import Clickoutside from 'element-ui/src/utils/clickoutside' export default { directives: { Clickoutside }, data() { return { isShowBox: true } }, methods: { closeBox() { this.isShowBox = false; } } };
在document元素上注冊'mousedown'和'mouseup'事件,mouseup時(shí)會執(zhí)行使用了該指令元素上的documentHandler方法
documentHandler方法里判斷點(diǎn)擊的元素是否為使用了指令的元素,不是就執(zhí)行closeBox的方法
import Vue from 'vue'; import { on } from 'element-ui/src/utils/dom'; const nodeList = []; const ctx = '@@clickoutsideContext'; let startClick; let seed = 0; on(document, 'mousedown', e => (startClick = e)); on(document, 'mouseup', e => { nodeList.forEach(node => node[ctx].documentHandler(e, startClick)); }); function createDocumentHandler(el, binding, vnode) { return function(mouseup = {}, mousedown = {}) { if (!vnode || !vnode.context || !mouseup.target || !mousedown.target || el.contains(mouseup.target) || el.contains(mousedown.target) || el === mouseup.target || (vnode.context.popperElm && (vnode.context.popperElm.contains(mouseup.target) || vnode.context.popperElm.contains(mousedown.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(); } }; } /** * v-clickoutside * @desc 點(diǎn)擊元素外面才會觸發(fā)的事件 * @example * ```vue * <div v-element-clickoutside="handleClose"> * ``` */ 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 }; }, update(el, binding, vnode) { el[ctx].documentHandler = createDocumentHandler(el, binding, vnode); el[ctx].methodName = binding.expression; el[ctx].bindingFn = binding.value; }, 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]; } };
感謝各位的閱讀,以上就是“elementui中的clickoutside點(diǎn)擊空白隱藏元素怎么實(shí)現(xiàn)”的內(nèi)容了,經(jīng)過本文的學(xué)習(xí)后,相信大家對elementui中的clickoutside點(diǎn)擊空白隱藏元素怎么實(shí)現(xiàn)這一問題有了更深刻的體會,具體使用情況還需要大家實(shí)踐驗(yàn)證。這里是億速云,小編將為大家推送更多相關(guān)知識點(diǎn)的文章,歡迎關(guān)注!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。