继续浏览精彩内容
慕课网APP
程序员的梦工厂
打开
继续
感谢您的支持,我会继续努力的
赞赏金额会直接到老师账户
将二维码发送给自己后长按识别
微信支付
支付宝支付

【金秋打卡】第16天 Vue3 + Typescript 从0到1开发通用基础组件(4-12)

慕仔9208797
关注TA
已关注
手记 60
粉丝 1
获赞 7

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

课程讲师:张轩

课程内容:

今天课程学习的主要知识点内容包括:
1、通过自定义函数实现是否是点击组件的外部事件(TS);

课程收获:

通过学习老师的视频课程和同学的公开笔记,主要收获如下:
一、通过自定义函数实现是否是点击组件的外部事件
1、实现要点
完成点击下拉框以外的地方让下拉框隐藏,需要两步:
(1)在mounted时候添加click事件,在unmounted的时候将事件删除;
(2)拿到Dropdown的DOM元素从而判断,点击的内容是否被这个元素包含;
html的Dom节点类型是HTMLElement。

2、编写 useClickOutside.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

3、修改原来 Dropdown.vue 的处理逻辑
主要的核心代码如下:

<script lang="ts">
......
import useClickOutside from '../hooks/useClickOutside'
export default defineComponent({
  ......
  setup() {
    ......
    const isClickOutside = useClickOutside(dropdownRef)

    watch(isClickOutside, () => {
      if (isOpen.value && isClickOutside.value) {
        isOpen.value = false
      }
    })
    return {
      isOpen,
      ......
    }
  }
})
</script>

关键点:在 setup() 函数中无法通过 watch() 函数状态的变化,并对这些变化做出相应的改变。

打开App,阅读手记
0人推荐
发表评论
随时随地看视频慕课网APP