improvement(components): [tooltip] dom ref types (#18923)

This commit is contained in:
sea 2024-11-17 14:14:25 +08:00 committed by GitHub
parent 300b58c548
commit 768f5999f8
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
3 changed files with 14 additions and 13 deletions

View File

@ -180,12 +180,12 @@ tooltip/animations
### Exposes
| Name | Description | Type |
| -------------------- | ----------------------------------------------------------------- | ------------------------------------------------- |
| popperRef | el-popper component instance | ^[object]`Ref<PopperInstance \| null>` |
| contentRef | el-tooltip-content component instance | ^[object]`Ref<TooltipContentInstance \| null>` |
| isFocusInsideContent | validate current focus event is trigger inside el-tooltip-content | ^[Function]`() => boolean \| undefined` |
| updatePopper | update el-popper component instance | ^[Function]`() => void` |
| onOpen | expose onOpen function to mange el-tooltip open state | ^[Function]`(event?: Event \| undefined) => void` |
| onClose | expose onClose function to mange el-tooltip open state | ^[Function]`(event?: Event \| undefined) => void` |
| hide | expose hide function | ^[Function]`(event?: Event \| undefined) => void` |
| Name | Description | Type |
| -------------------- | ----------------------------------------------------------------- | --------------------------------------------------- |
| popperRef | el-popper component instance | ^[object]`Ref<PopperInstance \| undefined>` |
| contentRef | el-tooltip-content component instance | ^[object]`Ref<TooltipContentInstance \| undefined>` |
| isFocusInsideContent | validate current focus event is trigger inside el-tooltip-content | ^[Function]`() => boolean \| undefined` |
| updatePopper | update el-popper component instance | ^[Function]`() => void` |
| onOpen | expose onOpen function to mange el-tooltip open state | ^[Function]`(event?: Event \| undefined) => void` |
| onClose | expose onClose function to mange el-tooltip open state | ^[Function]`(event?: Event \| undefined) => void` |
| hide | expose hide function | ^[Function]`(event?: Event \| undefined) => void` |

View File

@ -51,6 +51,7 @@ import { ElPopperContent } from '@element-plus/components/popper'
import ElTeleport from '@element-plus/components/teleport'
import { TOOLTIP_INJECTION_KEY } from './constants'
import { useTooltipContentProps } from './content'
import type { PopperContentInstance } from '@element-plus/components/popper'
defineOptions({
name: 'ElTooltipContent',
@ -61,8 +62,8 @@ const props = defineProps(useTooltipContentProps)
const { selector } = usePopperContainerId()
const ns = useNamespace('tooltip')
// TODO any is temporary, replace with `InstanceType<typeof ElPopperContent> | null` later
const contentRef = ref<any>(null)
const contentRef = ref<PopperContentInstance>()
let stopHandle: ReturnType<typeof onClickOutside>
const {
controlled,

View File

@ -70,6 +70,7 @@ import { TOOLTIP_INJECTION_KEY } from './constants'
import { tooltipEmits, useTooltipModelToggle, useTooltipProps } from './tooltip'
import ElTooltipTrigger from './trigger.vue'
import ElTooltipContent from './content.vue'
import type { TooltipContentInstance } from './content'
import type { PopperInstance } from '@element-plus/components/popper'
defineOptions({
@ -83,8 +84,7 @@ usePopperContainer()
const id = useId()
const popperRef = ref<PopperInstance>()
// TODO any is temporary, replace with `TooltipContentInstance` later
const contentRef = ref<any>()
const contentRef = ref<TooltipContentInstance>()
const updatePopper = () => {
const popperComponent = unref(popperRef)