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

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 default useClickOutside

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

需要解决判断点击的是哪一个部分

就涉及到关于Vue虚拟DOM、树、节点的内容了。

浏览器工作原理：

浏览器是通过监控整个由DOM节点构成的树来监听整个页面的。

  if (elementRef.value.contains(e.target as HTMLElement)) {
    isClickOutside.value = false
  } else {
    isClickOutside.value = true
  }
1
2
3
4
5

判断元素是不是点击的DOM节点。然后给导出的ref变量赋值，做点击判断的target。

3. 运行结果：

1. 点击前：

   

2. 点击后：