useResizeObserver

类别

Elements

导出体积

500 B

上次更改

7 months ago

报告元素内容或边框框的尺寸变化。

示例

源码 playground (beta)

调整大小以查看更改

用法

vue

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

const el
 = useTemplateRef
('el')
const text
 = ref
('')

useResizeObserver
(el
, (entries
) => {
  const entry
 = entries
[0]
  const { width
, height
 } = entry
.contentRect

  text
.value
 = `width: ${width
}, height: ${height
}`
})
</script>

<template>
  <div
 ref
="el
">
    {{ text
 }}
  </div
>
</template>

Directive Usage

This function also provides a directive version via the @vueuse/components package. Learn more about the usage.

vue

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

const text
 = ref
('')

function onResizeObserver
(entries
) {
  const [entry
] = entries

  const { width
, height
 } = entry
.contentRect
  text
.value
 = `width: ${width
}, height: ${height
}`
}
</script>

<template>
  <div
 v-resize-observ
er="onResizeObserver
">
    {{ text
 }}
  </div
>
</template>

ResizeObserver MDN

类型声明

显示类型声明

export interface ResizeObserverSize {
  readonly inlineSize
: number
  readonly blockSize
: number
}
export interface ResizeObserverEntry {
  readonly target
: Element
  readonly contentRect
: DOMRectReadOnly
  readonly borderBoxSize
: ReadonlyArray
<ResizeObserverSize>
  readonly contentBoxSize
: ReadonlyArray
<ResizeObserverSize>
  readonly devicePixelContentBoxSize
: ReadonlyArray
<ResizeObserverSize>
}
export type ResizeObserverCallback
 = (
  entries
: ReadonlyArray
<ResizeObserverEntry>,
  observer
: ResizeObserver
,
) => void
export interface UseResizeObserverOptions extends ConfigurableWindow {
  /**
   * 设置观察器将观察哪种盒模型的变化。可能的值有 `content-box`（默认值）、`border-box` 和 `device-pixel-content-box`。
   *
   * @default 'content-box'
   */
  box
?: ResizeObserverBoxOptions

}
declare class ResizeObserver
 {
  constructor(callback
: ResizeObserverCallback
)
  disconnect
(): void
  observe
(target
: Element, options
?: UseResizeObserverOptions): void
  unobserve
(target
: Element): void
}
/**
 * 监听元素内容或边框盒尺寸的变化
 *
 * @see https://vueuse.org/useResizeObserver
 * @param target
 * @param callback
 * @param options
 */
export declare function useResizeObserver
(
  target
:
    | MaybeComputedElementRef

    | MaybeComputedElementRef
[]
    | MaybeRefOrGetter
<MaybeElement
[]>,
  callback
: ResizeObserverCallback
,
  options
?: UseResizeObserverOptions,
): {
  isSupported
: ComputedRef
<boolean>
  stop
: () => void
}
export type UseResizeObserverReturn
 = ReturnType
<typeof useResizeObserver
>