这里也可以复用useClickOutside，点击modal以外的区域关闭modal。但是面临一个问题，就是删除按钮也是在modal区域外的，所以会判断为isClickOutside为真，导致modal不能正常点开。我的解决方法是在useClickOutside里增加一个可选参数，接收clickOutside判断时排除在外的HTMLELEMENT(也就是在modal之外但是被算为是modal的一份子的dom，比如这里的删除按钮)，主要代码如下图。但是这就需要调用Modal的组件多穿一个参数，不知道有没有更优雅的解决方法。

// Modal.vue
const modalRef = ref<null | HTMLElement>(null)
const buttonRef = computed(() => props.buttonRef)
const isClickOutside = useClickOutside(modalRef, buttonRef)
watch([() => props.visible, isClickOutside], (n, o) => {
  const prevVisible = o[0]
  if (prevVisible && isClickOutside.value) {
    context.emit('modal-on-close')
  }
})

// useClickOutside.ts
export default function useClickOutside (elementRef: Ref<null | HTMLElement>, exclusionRef?: Ref<HTMLElement>) {
  const isClickOutside = ref(false)
  const handler = (e: MouseEvent) => {
    // clicked outside the element
    if (elementRef.value && !elementRef.value.contains(e.target as HTMLElement)) {
      // if clicked in the exclusion element, do not count as clicked inside
      if (exclusionRef && exclusionRef.value && exclusionRef.value.contains(e.target as HTMLElement)) {
        isClickOutside.value = false
      } else {
        isClickOutside.value = true
      }
    } else {
      isClickOutside.value = false
    }
  }
  onMounted(() => {
    document.addEventListener('click', handler)
  })
  onUnmounted(() => {
    document.removeEventListener('click', handler)
  })

  return isClickOutside
}