v-click-outside 点击元素外部的指令

1. 介绍

vue2: v-click-outside (opens new window)

vue3: click-outside-vue3 (opens new window)

上面两个版本，参数是一样的。

2. 使用

在 vue3 + TS 中的使用

<template>
  <!-- 传函数，则使用默认参数 -->
  <div v-click-outside="onClickOutside" ></div>

  <!-- 传对象，自定义参数 -->
  <div v-click-outside="vcoConfig"></div>


</template>
<script lang="ts">
import { defineComponent } from 'vue';
import vClickOutside from 'click-outside-vue3';

export default defineComponent({
  directives: {
    clickOutside: vClickOutside.directive,
  },

  data() {
    return {
      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>

click-outside.d.ts :

/* eslint-disable no-var,vars-on-top */

declare module 'click-outside-vue3' {
  var directive: any;

  function install();
}