關閉彈層之clickoutside
阿新 • • 發佈:2020-08-18
先比較一下iview和elementui對點選彈層以外的區別關閉彈層的程式碼實現:
iview
export default { bind (el, binding, vnode) { function documentHandler (e) { if (el.contains(e.target)) { return false; } if (binding.expression) { binding.value(e); } } el.__vueClickOutside__ = documentHandler; document.addEventListener('click', documentHandler); }, update () { }, unbind (el, binding) { document.removeEventListener('click', el.__vueClickOutside__); delete el.__vueClickOutside__; } };
elmentui
import Vue from 'vue'; import { on } from 'element-ui/src/utils/dom'; const nodeList = []; const ctx = '@@clickoutsideContext'; let startClick; let seed = 0; !Vue.prototype.$isServer && on(document, 'mousedown', e => (startClick = e)); !Vue.prototype.$isServer && 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 點選元素外面才會觸發的事件 * @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程式碼實現更復雜,而iview要精簡得多,按照write less do more原則,我認為iview作者aresn程式設計思想更好一些。