vue 挂载全局事件

32 阅读1分钟

const isShowExportSelect = ref(false)
const modeRef = ref()
// 挂载全局事件 如果点击选择框外 隐藏选择框
function handleGlobalClick (event: MouseEvent) { 
  // 获取下拉框元素
  const modeElement = modeRef.value
  // 判断点击的位置是否在下拉框内
  if (modeElement && !modeElement.contains(event.target)) {
  // 点击了下拉框外部,隐藏下拉框
    isShowExportSelect.value = false
  }
}
// 在组件挂载时添加全局点击事件监听器
onMounted(() => {
  document.addEventListener('click', handleGlobalClick)
})

// 在组件卸载前移除全局点击事件监听器
onUnmounted(() => {
  document.removeEventListener('click', handleGlobalClick)
})