【金秋打卡】第15天 Vue3 + Typescript 从0到1开发通用基础组件（4-11）

课程名称：Vue3 + Typescript 从0到1开发通用基础组件

课程章节：
4-11 Dropdown 第三部分

课程讲师：张轩

课程内容：

今天课程学习的主要知识点内容包括：
1、为页面添加点击事件的技巧；
2、在 setup 函数值中，使用组件对象（ref=xxx）的技巧；
3、判断点击事件是否落在本组件内的方法；

课程收获：

通过学习老师的视频课程和同学的公开笔记，主要收获如下：
一、为页面添加点击事件的技巧
需要注意，需要在 onMounted 方法中绑定 click 事件，然后在 onUnmounted 方法中需要移除的 click 事件。

  const handler = (e: MouseEvent) => {
    ......
  }
  onMounted(() => {
    document.addEventListener('click', handler)
  })
  onUnmounted(() => {
    document.removeEventListener('click', handler)
  })

二、在 setup 函数值中，使用组件对象（ref=xxx）的技巧
关键实现代码如下：

<template>
<div ref="dropdownRef">
  ......
</template>

<script lang="ts">
export default defineComponent({
  ......
  setup() {
    const dropdownRef = ref<null | HTMLElement>(null)
    ......
    return {
      ......,
      dropdownRef
    }
  }
})
</script>

关键点是 const dropdownRef = ref<null | HTMLElement>(null) 与 标签

中的 ref 的值要相同。

三、判断点击事件是否落在本组件内的方法
关键实现代码如下：

  const handler = (e: MouseEvent) => {
    if (dropdownRef.value) {
      if (!dropdownRef.value.contains(e.target as HTMLElement) && isOpen===true) {
        isOpen = false
      }
    }
  }