refactor: 移除自定义debounce和clickoutside指令,后续通过vueuse实现
Former-commit-id: 850159c0d1e72301639b64b043ec57beb3de70ea
This commit is contained in:
@@ -1,52 +0,0 @@
|
|||||||
import { Directive } from 'vue';
|
|
||||||
|
|
||||||
declare type NoNameFUnctionReturnVoid = () => void;
|
|
||||||
|
|
||||||
export const clickOutside: Directive<HTMLElement, NoNameFUnctionReturnVoid> =
|
|
||||||
(() => {
|
|
||||||
const checkIfClickedInside = (
|
|
||||||
event: Event,
|
|
||||||
element: HTMLElement,
|
|
||||||
callBackFn: NoNameFUnctionReturnVoid
|
|
||||||
) => {
|
|
||||||
console.log('element', element);
|
|
||||||
const isInside = event.composedPath().includes(element);
|
|
||||||
|
|
||||||
if (isInside) {
|
|
||||||
return false;
|
|
||||||
} else {
|
|
||||||
callBackFn();
|
|
||||||
}
|
|
||||||
};
|
|
||||||
|
|
||||||
const allListeners: {
|
|
||||||
element: HTMLElement;
|
|
||||||
listener: (e: Event) => void;
|
|
||||||
}[] = [];
|
|
||||||
|
|
||||||
return {
|
|
||||||
created(element) {
|
|
||||||
element.dataset.clicked = 'false';
|
|
||||||
},
|
|
||||||
|
|
||||||
mounted(element, binding) {
|
|
||||||
const myListener = (e: Event) => {
|
|
||||||
checkIfClickedInside(e, element, binding.value);
|
|
||||||
};
|
|
||||||
allListeners.push({ element, listener: myListener });
|
|
||||||
window.addEventListener('click', myListener);
|
|
||||||
},
|
|
||||||
|
|
||||||
unmounted(element) {
|
|
||||||
const eventIndex = allListeners.findIndex(
|
|
||||||
listener => listener.element === element
|
|
||||||
);
|
|
||||||
|
|
||||||
if (eventIndex !== -1) {
|
|
||||||
const listener = allListeners[eventIndex].listener;
|
|
||||||
window.removeEventListener('click', listener);
|
|
||||||
allListeners.splice(eventIndex, 1);
|
|
||||||
}
|
|
||||||
}
|
|
||||||
};
|
|
||||||
})();
|
|
||||||
@@ -1,15 +0,0 @@
|
|||||||
import { Directive } from 'vue';
|
|
||||||
|
|
||||||
/**
|
|
||||||
* 按钮防抖
|
|
||||||
*/
|
|
||||||
export const deBounce: Directive = {
|
|
||||||
mounted(el: HTMLElement) {
|
|
||||||
el.addEventListener('click', () => {
|
|
||||||
el.classList.add('is-disabled');
|
|
||||||
setTimeout(() => {
|
|
||||||
el.classList.remove('is-disabled');
|
|
||||||
}, 2000);
|
|
||||||
});
|
|
||||||
}
|
|
||||||
};
|
|
||||||
@@ -1,3 +1 @@
|
|||||||
export { hasPerm, hasRole } from './permission';
|
export { hasPerm, hasRole } from './permission';
|
||||||
export { clickOutside } from './ClickOutside';
|
|
||||||
export { deBounce } from './Debounce';
|
|
||||||
|
|||||||
Reference in New Issue
Block a user