小程序获能用createSelectorQuery,如果是子组件,后面可以额外加一个参数in来指定获取dom的范围。小程序里面可以直接.in(this),但是vue3没有this了,那就只能通过getCurrentInstance去获取当前实例代替this ,注意这里需要用解构的方法把proxy引进来
<view class="image-container">内容</view>
import { ref, reactive, onMounted, nextTick, watch, getCurrentInstance } from 'vue';
const { proxy } = getCurrentInstance();
// 获取容器尺寸
const getContainerSize = () => {
new Promise((resolve, reject) => {
let view = uni.createSelectorQuery().in(proxy);
view
.select('.image-container')
.boundingClientRect((data) => {
containerWidth.value = data.width;
containerHeight.value = data.height;
console.log(data);
resolve(data);
})
.exec();
}).then((res) => {
});
};
/ 组件挂载后初始化
onMounted(async () => {
await nextTick();
getContainerSize();
});