Migrating "detect click outside" custom directive from Vue 2 to Vue 3

Question

Based on this question Detect click outside element and this answer https://stackoverflow.com/a/42389266, I'm trying to migrate the directive from Vue 2 to Vue 3. It seems that binding.expression and vnode.context not exists more. How can I make it work?

app.directive('click-outside', {
    beforeMount (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);
    },
    unmounted (el) {
        document.body.removeEventListener('click', el.clickOutsideEvent);
    }
});

Answer 1

You can use binding.value instead like this:

const { createApp } = Vue;

const highlightEl = (color ) => (event, el) => {
  if (el) {
    el.style.background = color;
  } else {
    event.target.style.background = color;
  }
}
const clearHighlightEl = (event, el) => {
  if (el) {
    el.style.background = '';
  } else {
    event.target.style.background = '';
  }
}

const app = Vue.createApp({
  setup() {
    return {
      highlightEl,
      clearHighlightEl
    }
  }
})

app.directive('click-outside', {
  mounted(el, binding, vnode) {
    el.clickOutsideEvent = function(event) {
      if (!(el === event.target || el.contains(event.target))) {
        binding.value(event, el);
      }
    };
    document.body.addEventListener('click', el.clickOutsideEvent);
  },
  unmounted(el) {
    document.body.removeEventListener('click', el.clickOutsideEvent);
  }
});

app.mount('#app')

<script src="https://unpkg.com/[email protected]/dist/vue.global.prod.js"></script>

<div id="app">
  <h1 v-click-outside="highlightEl('yellow')" @click="clearHighlightEl">Element 1</h1>
  <p v-click-outside="highlightEl('#FFCC77')" @click="clearHighlightEl">Element 2</p>
</div>

Answer 2

out of the context, there's an easier way in vue3 with composition.

Link to Vueuse ClickOutside (Vue 3)

Link to Vueuse ClickOutside(Vue 2)

<template>
  <div ref="target">
    Hello world
  </div>
  <div>
    Outside element
  </div>
</template>

<script>
import { ref } from 'vue'
import { onClickOutside } from '@vueuse/core'

export default {
  setup() {
    const target = ref(null)

    onClickOutside(target, (event) => console.log(event))

    return { target }
  }
}
</script>

Answer 3

you can use ref to find out if the element contains the element clicked

<template>
    <div ref="myref">
        Hello world
    </div>
    <div>
        Outside element
    </div>
</template>

<script>

export default {

    data() {
        return {
            show=false
        }
    },
    mounted(){
        let self = this;
        document.addEventListener('click', (e)=> {
            if (self.$refs.myref !==undefined && self.$refs.myref.contains(e.target)===false) {
                //click outside!
                self.show = false;
            }
        })
    }
}
</script>

Answer 4

hook solution:

<template>
  <p ref="myP">does click outside of p : {{ isClickOutside ? 'Yes' : 'No' }}</p>
</template>

<script lang="ts" setup>
import { useOnClickOutside } from './useOnClickOutside'

const myP = ref()
const isClickOutside = useOnClickOutside(myP, () => {
  console.log('click outside of p')
})
</script>

useOnClickOutside.js

import { onBeforeUnmount, onMounted, ref } from 'vue'
// DOMRef is dom by ref
export function useOnClickOutside(DOMRef = null, callback) {
  const isClickOutside = ref(false)
  function handleClick(event) {
    if (DOMRef?.value && !DOM.value.contains(event.target)) {
      callback()
      isClickOutside.value = true
      return
    }
    isClickOutside.value = false
  }

  onMounted(() => {
    document.addEventListener('mousedown', handleClick)
  })

  onBeforeUnmount(() => {
    document.removeEventListener('mousedown', handleClick)
  })
  return isClickOutside
}

component solution:

use:

<template>
   <OnClickOutside :clickOutside="conosole.log('log when clickoutside of div')">
     <div>when clicked outside div</div>
   </OnClickOutside>
</template>

vue2 solution:

<script>
  export default {
    name: 'OnClickOutside',
    props: ['clickOutside'],
    mounted() {
      const listener = e => {
        if (e.target === this.$el || this.$el.contains(e.target)) {
          return
        }
        this.clickOutside()
      }

      document.addEventListener('click', listener)
      this.$once('hook:beforeDestroy', () => document.removeEventListener('click', listener))
    },
    render() {
      return this.$slots.default[0]
    },
  }
</script>

vue3:

<script>
  import { getCurrentInstance, onMounted, onBeforeUnmount, ref, defineComponent } from 'vue'
  export default defineComponent({
    name: 'OnClickOutside',
    props: ['clickOutside'],
    setup(props, { emit, attrs, slots }) {
      const vm = getCurrentInstance()
      const listener = event => {
        const isClickInside = vm.subTree.children.some(element => {
          const el = element.el
          return event.target === el || el.contains(event.target)
        })
        if (isClickInside) {
          console.log('clickInside')
          return
        }
        props.clickOutside && props.clickOutside()
      }
      onMounted(() => {
        document.addEventListener('click', listener)
      })
      onBeforeUnmount(() => {
        document.removeEventListener('click', listener)
      })
      return () => slots.default()
    },
  })
</script>