perf: 修改 use 为 hooks

This commit is contained in:
就眠仪式
2021-10-24 23:42:18 +08:00
parent dd8f37181a
commit 6374ad4805
5 changed files with 11 additions and 13 deletions

View File

@@ -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