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>