ClickOutSide

用于监听包裹的元素点击外部触发事件

Usage

<template>
  <div>
    <ClickOutSide @clickOutside="() => (showRef.value = false)">
      <div @click="() => (showRef.value = true)">
        {{ showRef ? '鼠标点击那部(点击边框外可以恢复)' : '点击该区域状态(初始状态)' }}
      </div>
    </ClickOutSide>
  </div>
</template>
<script>
  import { defineComponent, ref } from 'vue';
  import { ClickOutSide } from '@/components/ClickOutSide/index.vue';
  export default defineComponent({
    components: { ClickOutSide },
    setup() {
      const showRef = ref(false);
      return {
        showRef,
      };
    },
  });
</script>

Events

事件回调参数说明
clickOutside()=>void点击包裹元素外部区域触发

Slots

名称说明
default被包裹的元素