在 vue3.2 + 中实现 useClickOutside, watch 函数可选

Question

• useClickOutside.ts

import {ref, onMounted, onUnmounted, type Ref} from 'vue'

function useClickOutside(
    elementRef: Ref<null | HTMLElement>,
    isOpen?: Ref<boolean>
) {
    const isClickOutside = ref(false)

    function handler(e: MouseEvent) {
        if (elementRef.value) {
            if (!elementRef.value.contains(e.target as HTMLElement)) {
                isClickOutside.value = true
                if (isOpen) {
                    if (isOpen.value) isOpen.value = false
                }
            } else {
                isClickOutside.value = false
            }
        }
    }

    onMounted(() => {
        document.addEventListener('click', handler)
    })

    onUnmounted(() => {
        document.removeEventListener('click', handler)
    })

    return isClickOutside
}

export default useClickOutside

• 在 Dropdown.vue 中 使用 useClickOutside.ts

import { ref, watch } from 'vue'
import useClickOutside from '@/hooks/useClickOutside'
interface DropdownProps {
  title: string
}
const { title } = defineProps<DropdownProps>()

const isOpen = ref(false)
function toggleIsOpen() {
  isOpen.value = !isOpen.value
}

const dropdownRef = ref<null | HTMLElement>(null)
// 使用 watch
// const isClickOutside = useClickOutside(dropdownRef)
// watch(isClickOutside, () => {
//   if (isOpen.value && isClickOutside.value) {
//     isOpen.value = false
//   }
// })

// 不使用watch
useClickOutside(dropdownRef, isOpen)

Answer 1

精慕门6258392 2022-03-02 10:06:47

可以的!

• Silvano #1

  加了isOpen是否造成了函数的耦合 功能就单一了 其他地方不能用吧

• 精慕门6258392 回复 Silvano #2

  这个第二个参数全是扩展现有功能吧

Answer 2

Silvano 2022-02-23 09:52:45

watch是设置监听变化做对应的处理 不用watch 也能有相同的结果吗 setup内代码只是跑一次吧