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 { clickOutside } from './ClickOutside';
|
||||
export { deBounce } from './Debounce';
|
||||
|
||||
Reference in New Issue
Block a user