eslink-ui-plus/components/utils/useHooks.ts

vue3 component library, css framework

import { Ref, ref, onMounted, onBeforeUnmount } from 'vue'
import { initKeyConfig } from './commonProps'
import { merge } from './utils'
import type { keyConfigType } from './commonProps'
export const useConfigKey = (propConfigKey: keyConfigType) => {
	return merge(propConfigKey, initKeyConfig)
}
type useRefValueFnType = <T>(initValue: T) => [Ref<T>, (v: T) => void, () => T]
export const useRefValue: useRefValueFnType = (initValue: any = null) => {
	const value = ref<any>(initValue)
	const setValue = (val: any) => {
		value.value = val
	}
	const getValue = () => {
		return value.value
	}
	return [value, setValue, getValue]
}

export const useTogglePanle = (containerRef: any) => {
	const panelShow = ref<boolean>(false)
	const closePanelByLiser = (e: MouseEvent) => {
		if (!containerRef.value.$el.contains(e.target as Node)) {
			closePanel()
		}
	}
	const toggelePanel = (e: MouseEvent) => {
		panelShow.value = !panelShow.value
		e.cancelBubble = true
	}
	onMounted(() => {
		window.addEventListener('click', closePanelByLiser, false)
		containerRef.value.$el.addEventListener('click', toggelePanel)
	})
	onBeforeUnmount(() => {
		window.removeEventListener('click', closePanelByLiser)
		containerRef.value.$el.removeEventListener('click', toggelePanel)
	})
	const closePanel = () => {
		panelShow.value = false
	}
	const openPanel = () => {
		panelShow.value = true
	}
	return {
		panelShow,
		closePanel,
		openPanel,
	}
}