import { ref, onBeforeUnmount, onMounted } from "@vue/composition-api";
// 사용하는 곳에서 element의 class명을 argument로 보낸다.
export const useClickOutside = (el: string) => {
const isClickOutside = ref<boolean>(false);
const close = (e: Event) => {
if (
e.target instanceof HTMLElement &&
document.querySelector(el).contains(e.target)
) {
isClickOutside.value = false;
return;
}
isClickOutside.value = true;
};
onBeforeUnmount(() => {
document.removeEventListener("click", close);
});
onMounted(() => {
document.addEventListener("click", close);
});
return {
isClickOutside,
};
};
<script lang="ts">
import Vue from "vue";
import { useClickOutside } from "@/hooks/useClickOutside";
export default Vue.extend({
setup() {
const { isClickOutside } = useClickOutside('.classname');
return { isClickOutside };
},
watch: {
isClickOutside() {
if (this.isClickOutside) {
// 바깥 부분 클릭시 처리할 코드
this.isShow = false;
}
},
},