Vue directive - 버튼 외 다른 영역 클릭 시 함수 실행 테스트

Vue directive - 버튼 외 다른 영역 클릭 시 함수 실행 테스트

 

1. main.js 에 사용할 Vue directive 함수 추가

Vue.directive("click-outside", {
  bind: function (el, binding, vnode) {
    el.clickOutsideEvent = function (event) {
      if (!(el == event.target || el.contains(event.target))) {
        vnode.context[binding.expression](event);
      }
    };
    document.body.addEventListener('click', el.clickOutsideEvent)
  },
  unbind: function (el) {
    document.body.removeEventListener('click', el.clickOutsideEvent)
  },
});

 

 

2. 적용할 버튼에 해당 directive 추가

버튼 영역 외 다른 부분 클릭 시 outsideEvent 함수가 실행됨

<template>
    <div>
        <button type="button" v-click-outside="outsideEvent"></button>
    </div>
</template>

<script>
export default {
  props: {},
  data() {
    return {};
  },
  mounted() {},
  methods: {
    outsideEvent() {
    	// 버튼 외 다른 영역 클릭 시 함수 실행
    },
  },
};
</script>