2022-01-04 09:15:15 +08:00
|
|
|
import { unref } from 'vue'
|
2022-02-11 11:03:15 +08:00
|
|
|
import { buildProps } from '@element-plus/utils'
|
2022-01-04 09:15:15 +08:00
|
|
|
import { useTimeout } from '../use-timeout'
|
|
|
|
|
|
|
|
import type { ToRefs, ExtractPropTypes } from 'vue'
|
|
|
|
|
|
|
|
export const useDelayedToggleProps = buildProps({
|
|
|
|
showAfter: {
|
|
|
|
type: Number,
|
|
|
|
default: 0,
|
|
|
|
},
|
|
|
|
hideAfter: {
|
|
|
|
type: Number,
|
|
|
|
default: 200,
|
|
|
|
},
|
2022-02-11 11:40:50 +08:00
|
|
|
} as const)
|
2022-01-04 09:15:15 +08:00
|
|
|
|
|
|
|
export type UseDelayedToggleProps = {
|
|
|
|
open: () => void
|
|
|
|
close: () => void
|
|
|
|
} & ToRefs<ExtractPropTypes<typeof useDelayedToggleProps>>
|
|
|
|
|
|
|
|
export const useDelayedToggle = ({
|
|
|
|
showAfter,
|
|
|
|
hideAfter,
|
|
|
|
open,
|
|
|
|
close,
|
|
|
|
}: UseDelayedToggleProps) => {
|
|
|
|
const { registerTimeout } = useTimeout()
|
|
|
|
|
|
|
|
const onOpen = () => {
|
|
|
|
registerTimeout(() => {
|
|
|
|
open()
|
|
|
|
}, unref(showAfter))
|
|
|
|
}
|
|
|
|
|
|
|
|
const onClose = () => {
|
|
|
|
registerTimeout(() => {
|
|
|
|
close()
|
|
|
|
}, unref(hideAfter))
|
|
|
|
}
|
|
|
|
|
|
|
|
return {
|
|
|
|
onOpen,
|
|
|
|
onClose,
|
|
|
|
}
|
|
|
|
}
|