useElementBounding

分类

元素

导出大小

1.31 kB

上次更改

8 个月前

HTML 元素的响应式边界框

演示

源码演练场（测试版）

调整盒子大小以查看变化

height: 0
bottom: 0
left: 0
right: 0
top: 0
width: 0
x: 0
y: 0

用法

vue

<script setup lang="ts">
import { useElementBounding
 } from '@vueuse/core'
import { useTemplateRef
 } from 'vue'

const el
 = useTemplateRef
('el')
const { x
, y
, top
, right
, bottom
, left
, width
, height
 } = useElementBounding
(el
)
</script>

<template>
  <div
 ref
="el
" />
</template>

组件用法

此函数还通过 @vueuse/components 包提供了一个无渲染组件版本。了解更多用法。

vue

<template>
  <UseElementBounding v-slot="{ width
, height
 }">
    Width: {{ width
 }} Height: {{ height
 }}
  </UseElementBounding>
</template>

指令用法

此函数还通过 @vueuse/components 包提供了一个指令版本。了解更多用法。

vue

<script setup lang="ts">
import { vElementBounding
 } from '@vueuse/components'

interface BoundingType {
  height
: number
  bottom
: number
  left
: number
  right
: number
  top
: number
  width
: number
  x
: number
  y
: number
}

function onBounding
({ height
, bottom
, left
, right
, top
, width
, x
, y
 }: BoundingType) {
  console
.log
(height
, bottom
, left
, right
, top
, width
, x
, y
)
}

const options
 = {
  reset
: true,
  windowResize
: true,
  windowScroll
: true,
  immediate
: true,
  updateTiming
: 'sync',
}
</script>

<template>
  <textarea
 v-element-boundi
ng="onBounding
" />
  <!-- with options -->
  <textarea
 v-element-boundi
ng="[
onBounding
, 
options
]
" />
</template>

类型声明

显示类型声明

export interface UseElementBoundingOptions {
  /**
   * Reset values to 0 on component unmounted
   *
   * @default true
   */
  reset
?: boolean
  /**
   * Listen to window resize event
   *
   * @default true
   */
  windowResize
?: boolean
  /**
   * Listen to window scroll event
   *
   * @default true
   */
  windowScroll
?: boolean
  /**
   * Immediately call update on component mounted
   *
   * @default true
   */
  immediate
?: boolean
  /**
   * Timing to recalculate the bounding box
   *
   * Setting to `next-frame` can be useful when using this together with something like {@link useBreakpoints}
   * and therefore the layout (which influences the bounding box of the observed element) is not updated on the current tick.
   *
   * @default 'sync'
   */
  updateTiming
?: "sync" | "next-frame"
}
/**
 * Reactive bounding box of an HTML element.
 *
 * @see https://vueuse.org.cn/useElementBounding
 * @param target
 */
export declare function useElementBounding
(
  target
: MaybeComputedElementRef
,
  options
?: UseElementBoundingOptions,
): {
  height
: ShallowRef
<number, number>
  bottom
: ShallowRef
<number, number>
  left
: ShallowRef
<number, number>
  right
: ShallowRef
<number, number>
  top
: ShallowRef
<number, number>
  width
: ShallowRef
<number, number>
  x
: ShallowRef
<number, number>
  y
: ShallowRef
<number, number>
  update
: () => void
}
export type UseElementBoundingReturn
 = ReturnType
<typeof useElementBounding
>