canrd-outside / order-erp-front · Files

index.vue 604 Bytes
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 
<template>
  <div ref="wrap"><slot /></div>
</template>
<script lang="ts">
  import type { Ref } from 'vue';
  import { defineComponent, ref, onMounted } from 'vue';

  import { useClickOutside } from '/@/hooks/web/useClickOutside';

  export default defineComponent({
    name: 'ClickOutSide',
    emits: ['mounted', 'clickOutside'],
    setup(_, { emit }) {
      const wrap = ref<ElRef>(null);

      useClickOutside(wrap as Ref<HTMLDivElement>, () => {
        emit('clickOutside');
      });

      onMounted(() => {
        emit('mounted');
      });

      return { wrap };
    },
  });
</script>