[Vue.js] Custom Directive : Outside Click Event

[Vue.js] Custom Directive : Outside Click Event

 

 

| `Custom Directive`란? 👉 itinerant.tistory.com/181

 

 

 

Custom Directive를 이용해서, 디렉티브를 갖고 있는 엘리먼트 바깥(외) 부분을 클릭할 경우를 감지하는 이벤트를 만들어 보고자 한다.

 

1. 원리

☝️ 바깥 부분을 선택하는지 감지하기 위해서는 Body 클릭 이벤트를 감지해서 현재 클릭한 타겟이 해당 엘리먼트인지 체크하는 방식으로 쉽게 만들 수 있다.

 

 

2. 순서

1. 가장 먼저, bind 를 이용해서 처음 엘리먼트에 바인딩 될 때 실행할 것을 선언해 준다.

{
	bind: function (el, binding, vnode) {
    	// ...
	},
}

 

2. 우리는 디렉티브를 갖는 엘리먼트 외의 부분에 이벤트를 걸어줄 것이므로

바디에 클릭 이벤트 리스너를 연결해서 모든 클릭을 감지하도록 한다.

{
	bind: function (el, binding, vnode) {
		document.body.addEventListener('click', [실행할_함수]);
	},
}

 

3. 그 다음, 클릭이벤트 타겟이 디렉티브에 연동된 엘리먼트가 아닌 경우에 원하는 이벤트를 처리하도록 함수를 만들어주면 된다. 

 

{
	bind: function (el, binding, vnode) {
		el.eventClickOutside = function (event) {
			if (!(el == event.target || el.contains(event.target))) {
				//  ... do something ...
			}
		};
	},
}

전체 코드

{
	bind: function (el, binding, vnode) {
		// create event
		el.eventClickOutside = function (event) {
			// when target is not element or is not element childs
			if (!(el == event.target || el.contains(event.target))) {
				//  ... do something ...
			}
		};

		// event binding
		document.body.addEventListener('click', el.eventClickOutside);
	},

	unbind: function (el) {
		document.body.removeEventListener('click', el.eventClickOutside);
	},
}

 

---

3. 실행 코드(예시)

완료 화면

// example.vue

<template>
  <div id="app">
    <button @click.stop="openMenu">open menu</button>
    
    <div id="menu" v-show="show" v-click-outside:openMenu="false">
      <a herf="#">1. Apple</a>
      <a herf="#">2. Banana</a>
      <a herf="#">3. Carrot</a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      show: false,
    };
  },
  directives: {
    'click-outside': {
        bind: function (el, binding, vnode) {
          // create event
          el.eventClickOutside = function (event) {
            // when target is not element or is not element childs
            if (!(el == event.target || el.contains(event.target))) {
              // call function
              vnode.context[binding.arg](binding.value);
            }
          };

          // event binding
          document.body.addEventListener('click', el.eventClickOutside);
        },

        unbind: function (el) {
          document.body.removeEventListener('click', el.eventClickOutside);
        },
      },
  },
  methods: {
    openMenu(value) {
      if (typeof value === 'boolean')  this.show = value;
      else {
        this.show = !this.show;
      }
    }
  }
};
</script>

<style>
  button {
    background-color: #334867;
    color: white;
    border: 1px solid #334867;
    border-radius: 5px;
    padding: 4px 10px;
    font-size: 20px;
  }
  
  #menu {
    background-color: skyblue;
    width: fit-content;
    margin-top: 5px;
    padding: 4px 28px;
    
    display: flex;
    flex-direction: column;
  }
  
  a {
    cursor: pointer;
    font-weight: 800;
    font-size: 14px;
    color: white;
    padding: 4px 0px;
  }
</style>