# ClickOutSide 用于監聽包裹的元素點擊外部觸發事件 ## Usage ```vue <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 | 被包裹的元素 |