vueuse 中文文档

Vueuse useElementSize Vue 获取html的元素大小

Vue 通过 Vueuse 库的 useElementSize 可以获取html的元素大小,并返回响应式对象,比jquery 获取HTML element更方便和优雅。

代码示例

<template>
    <textarea ref="el" rows="5" cols="30">
    缩放这个输入框试试看 
    width:{{ obj.width }},height:{{ obj.height }}</textarea>
 </template>
 <script setup lang="ts">
 /*
  vueuse 中文文档
  https://www.itxst.com/vueuse/tutorial.html
 */
 import { ref } from 'vue'
 import { useElementSize } from '@vueuse/core'
 //元素对象
 const el = ref(null);
 //元素响应式对象
 const obj = useElementSize(el);
 </script>

在线例子

例子

组件用例

也可以通过UseElementSize组件获取元素大小

<template>
 <UseElementSize v-slot="{ width, height }">
  <textarea rows="5" cols="30">
      Width: {{ width }}
      Height: {{ height }}
      </textarea>
</UseElementSize>
</template>
<script setup lang="ts">  
 //导入组件
 import {UseElementSize} from '@vueuse/components'
</script>

指令用例

也可以通过Vue 指令获取元素大小

<script setup lang="ts">
import { vElementSize } from '@vueuse/components'
function onResize({ width, height }: { width: number; height: number }) {
  console.log(width, height)
}
</script>
<template>
  <textarea v-element-size="onResize" />
  <!-- with options -->
  <textarea v-element-size="[onResize, {width:100,height:100}, {'box':'content-box'} ]" />
</template>

类型声明

export interface ElementSize {
  width: number
  height: number
}
/**
 * Reactive size of an HTML element.
 *
 * @see https://www.itxst.com/vueuse/tutorial.html
 * @param target
 * @param callback
 * @param options
 */
export declare function useElementSize(
  target: MaybeComputedElementRef,
  initialSize?: ElementSize,
  options?: UseResizeObserverOptions
): {
  width: Ref<number>
  height: Ref<number>
}
export type UseElementSizeReturn = ReturnType<typeof useElementSize>
Catalog
vueuse 入门 State 状态 Elements 元素 useActiveElement 焦点元素 useDocumentVisibility 是否可见 useDraggable 拖动元素 useDropZone 文件拖拽区 useElementBounding 获取元素边界 useElementSize 元素大小 useElementVisibility 元素是否可见 useIntersectionObserver 元素是否可见 useMouseInElement 鼠标hover事件 useMutationObserver 监视 DOM 变动 useParentElement 获取父元素 useResizeObserver 监控元素大小 useWindowFocus 窗口焦点状态 useWindowScroll 滚动条位置 useWindowSize 获取窗口大小 Browser 浏览器 Sensors 感应监测