Vue3组件开发——点击按钮外部触发弹窗事件

Vue3组件开发——点击按钮外部触发弹窗事件

1. 环境配置：

vscode

TS

​ “bootstrap”: “^5.1.3”,

​ “core-js”: “^3.6.5”,

​ “vue”: “^3.0.0”,

​ “vue-class-component”: “^8.0.0-0”

2. 代码：

useOutclick.TS

import { ref, onMounted, onUnmounted, Ref } from 'vue'
const useClickOutside = (elementRef: Ref<null | HTMLElement>) => {
  const isClickOutside = ref(false)
  const handler = (e:MouseEvent) => {
    if (elementRef.value) {
      if (elementRef.value.contains(e.target as HTMLElement)) {
        isClickOutside.value = false
      } else {
        isClickOutside.value = true
      }
    }
  }
  onMounted(() => {
    document.addEventListener('click', handler)
  })
  onUnmounted(() => {
    document.removeEventListener('click', handler)
  })
  return isClickOutside
}

export defaul