跳到主要内容

useCurrentElement

分类
导出大小
365 B
上次更改
10 个月前

获取当前组件的 DOM 元素作为 ref。

演示

打开你的 console.log 来查看元素

用法

ts
import { 
useCurrentElement
} from '@vueuse/core'
const
el
=
useCurrentElement
() // ComputedRef<Element>

或者传入一个特定的 Vue 组件

vue
<script setup lang="ts">
import { 
useCurrentElement
,
VueInstance
} from '@vueuse/core'
import {
shallowRef
} from 'vue'
const
componentRef
=
shallowRef
<
VueInstance
>(null as unknown as
VueInstance
)
const
el
=
useCurrentElement
(
componentRef
) // ComputedRef<Element>
</script> <template> <
div
>
<OtherVueComponent
ref
="
componentRef
" />
<
p
>Hello world</
p
>
</
div
>
</template>

注意事项

此函数在底层使用了 $el

ref 的值在组件挂载之前将是 undefined

  • 对于只有一个根元素的组件,它将指向该元素。
  • 对于以文本为根的组件,它将指向文本节点。
  • 对于具有多个根节点的组件,它将是 Vue 用于跟踪组件在 DOM 中位置的占位符 DOM 节点。

建议仅将此函数用于具有单个根元素的组件。

类型声明

ts
export declare function 
useCurrentElement
<
T
extends
MaybeElement
=
MaybeElement
,
R
extends
VueInstance
=
VueInstance
,
E
extends
MaybeElement
=
MaybeElement
extends
T
?
IsAny
<
R
["$el"]> extends false
?
R
["$el"]
:
T
:
T
,
>(
rootComponent
?:
MaybeElementRef
<
R
>):
ComputedRefWithControl
<
E
>

来源

源代码演示文档

贡献者

Anthony Fu
Anthony Fu
David Gonzalez
James Garbutt
IlyaL
山吹色御守
Jessé Correia Lins
vaakian X

更新日志

v12.3.0
59f75 - feat(toValue): 废弃 @vueuse/shared 中的 toValue,转而使用 Vue 的原生函数
0a9ed - feat!: 放弃对 Vue 2 的支持,优化打包并清理 (#4349)
v11.1.0
8e141 - feat: 尝试从 $el 推断类型 (#4202)
v10.8.0
0a9aa - feat: 允许从特定组件获取当前元素 (#3750)

根据 MIT 许可证发布。