DropDown 메뉴 만들기의 기본

DropDown 메뉴를 만드는데 기본은,

dropdown 창을 열수있는것은 오직 자기 자신이지만

닫는것은 자기 자신 또는 바깥에서도 닫을수있어야한다는것이다.

 

이를 위해 vue 의 ref 객체와 window.addEventListener 의 적절한 조합이 필요하다.

<template>
    
    <div 

        class       ="menu"
        ref         ="menu"
        @mousedown  ="mouseDown" 
        
    ></div>

    <div class="dropdown" v-if="state.isOpened"></div>

</template>

<script>

    import { ref, reactive } from 'vue'

    export default {

        setup() {

            const menu  = ref(null)
            const state = reactive({ isOpened : false })

            function mouseDown() {

                !state.isOpened ? open() : close()

            }

            function open() {

                state.isOpened = true
                window.addEventListener('mousedown', outside)

            }

            function close() {
                
                state.isOpened = false
                window.removeEventListener('mousedown', outside)

            }

            function outside(e) {

                if (e.target !== menu.value) close()

            }

            return { menu, state, mouseDown }

        }

    }

</script>

 

바깥을 클릭하는지 확인하기위해 vue 의 ref 를 사용하고,

이 객체를 e.target 과 비교하는것이 중요하다.

if (e.target !== menu.value) close() // 바깥을 클릭했으면 close() 실행

ES6 스타일로 작성해보면..

const mouseDown = () => { !state.isOpened ? open() : close()  }

const open = () => {

    state.isOpened = true
    window.addEventListener('mousedown', outside)

}

const close = () => {

    state.isOpened = false
    window.removeEventListener('mousedown', outside)

}

const outside = (e) => { if (e.target !== menu.value) close() }