// 失去焦点的时候不触发其他点击事件
|
const isolate = {
|
mounted(el) {
|
let isHandlingBlur = false;
|
const overlayClass = 'isolate-blur-overlay';
|
|
//
|
const inputEl = el.querySelectorAll('input')[0]
|
|
const createOverlay = () => {
|
const existing = document.querySelector(`.${overlayClass}`);
|
if (existing) return;
|
|
const overlay = document.createElement('div');
|
overlay.className = overlayClass;
|
overlay.style.cssText = `
|
position: fixed;
|
top: 0;
|
left: 0;
|
width: 100vw;
|
height: 100vh;
|
z-index: 9999;
|
opacity: 0;
|
`;
|
|
// 阻止所有交互
|
overlay.addEventListener('mousedown', stopEvent, true);
|
overlay.addEventListener('touchstart', stopEvent, true);
|
overlay.addEventListener('click', stopEvent, true);
|
|
document.body.appendChild(overlay);
|
};
|
|
const removeOverlay = () => {
|
const overlays = document.querySelectorAll(`.${overlayClass}`);
|
overlays.forEach(ol => ol.remove());
|
};
|
|
function stopEvent(e) {
|
e.stopPropagation();
|
e.preventDefault();
|
e.stopImmediatePropagation();
|
}
|
|
inputEl.addEventListener('focus', () => {
|
isHandlingBlur = true;
|
});
|
|
inputEl.addEventListener('blur', () => {
|
isHandlingBlur = true;
|
createOverlay();
|
|
|
setTimeout(() => {
|
removeOverlay();
|
isHandlingBlur = false;
|
}, 500);
|
});
|
|
// 阻止input自身事件冒泡
|
inputEl.addEventListener('click', (e) => {
|
if (isHandlingBlur) {
|
stopEvent(e);
|
}
|
});
|
}
|
};
|
|
export default isolate;
|
