perf: 修改 use 为 hooks
This commit is contained in:
@@ -3,25 +3,25 @@ import { ref, onMounted, onUnmounted, Ref } from 'vue'
|
||||
// 案例详见 dropdown.vue
|
||||
const useClickOutside = (elementRef: Ref<HTMLElement | null>) => {
|
||||
// 设置一个导出值
|
||||
const isClickOutside = ref(false);
|
||||
const isClickOutside = ref(false)
|
||||
// 给界面绑定上事件
|
||||
const handler = (e: MouseEvent) => {
|
||||
if (elementRef.value) {
|
||||
// e.target 有可能是为 null 所以需要断言
|
||||
if (elementRef.value.contains(e.target as HTMLElement)) {
|
||||
// 判断目标节点是不是当前的节点
|
||||
isClickOutside.value = false;
|
||||
isClickOutside.value = false
|
||||
} else {
|
||||
isClickOutside.value = true
|
||||
}
|
||||
}
|
||||
}
|
||||
onMounted(() => {
|
||||
document.addEventListener('click', handler);
|
||||
});
|
||||
document.addEventListener('click', handler)
|
||||
})
|
||||
onUnmounted(() => {
|
||||
document.removeEventListener('click', handler);
|
||||
});
|
||||
return isClickOutside;
|
||||
document.removeEventListener('click', handler)
|
||||
})
|
||||
return isClickOutside
|
||||
}
|
||||
export default useClickOutside;
|
||||
export default useClickOutside
|
||||
|
||||
Reference in New Issue
Block a user