以下是一个简单的例子，演示如何在 Vant 3 中使用 ref 和 onMounted 来获取元素的位置和尺寸信息：
<template>
<div ref="elementRef" @click="getElementRect">点击获取元素位置和尺寸</div>
</template>
<script>
import { ref, onMounted } from 'vue';
export default {
setup() {
// 创建一个 ref 用于引用元素
const elementRef = ref(null);
// 当组件挂载完成后执行的回调
onMounted(() => {
// 获取元素的位置和尺寸信息
const rect = elementRef.value.getBoundingClientRect();
console.log('元素位置和尺寸信息:', rect);
});
const getElementRect = () => {
// 在点击事件中也可以获取元素的位置和尺寸信息
const rect = elementRef.value.getBoundingClientRect();
console.log('元素位置和尺寸信息:', rect);
};
return {
elementRef,
getElementRect,
};
},
};
</script>
在上述例子中，我们创建了一个 elementRef，并将其绑定到一个 div 元素上。当组件挂载完成后，我们通过 getBoundingClientRect 方法获取元素的位置和尺寸信息，并在控制台中打印出来。当用户点击元素时，同样可以触发 getElementRect 方法获取位置和尺寸信息。
请根据你的具体需求，将上述代码适配到你的项目中。
转载请注明出处：http://www.zyzy.cn/article/detail/5782/Vant