vue3点击组件之外关闭组件click-outside-vue3

Install

$ npm install --save click-outside-vue3

$ yarn add click-outside-vue3

Use

import { createApp } from "vue"
import App from "./App.vue"
import vClickOutside from "click-outside-vue3"

const app = createApp(App)
app.use(vClickOutside)

<script>
  export default {
    data () {
      vcoConfig: {
        handler: this.handler,
        middleware: this.middleware,
        events: ['dblclick', 'click'],
        // Note: The default value is true, but in case you want to activate / deactivate
        //       this directive dynamically use this attribute.
        isActive: true,
        // Note: The default value is true. See "Detecting Iframe Clicks" section
        //       to understand why this behaviour is behind a flag.
        detectIFrame: true,
        // Note: The default value is false. Sets the capture option for EventTarget addEventListener method.
        //       Could be useful if some event's handler calls stopPropagation method preventing event bubbling.
        capture: false
      }
    },
    methods: {
      onClickOutside (event) {
        console.log('Clicked outside. Event: ', event)
      },

      handler (event) {
        console.log('Clicked outside (Using config), middleware returned true :)')
      },
      // Note: The middleware will be executed if the event was fired outside the element.
      //       It should have only sync functionality and it should return a boolean to
      //       define if the handler should be fire or not
      middleware (event) {
        return event.target.className !== 'modal'
      }
    }
  };
</script>

<template>
  <div v-click-outside="onClickOutside"></div>
  <div v-click-outside="vcoConfig"></div>
</template>

Or use it as a directive

import vClickOutside from 'click-outside-vue3'

<script>
  export default {
    directives: {
      clickOutside: vClickOutside.directive
    },
    methods: {
      onClickOutside (event) {
        console.log('Clicked outside. Event: ', event)
      }
    }
  };
</script>

<template>
  <div v-click-outside="onClickOutside"></div>
</template>