dom加载后执行 vue_【Vue】vue中等页面dom加载完毕后执行某方法？

最近在玩一个类似拼图的东东，业务场景就是在主图加载到页面的时候，计算主图相对页面容器的缩小放大系数，通过这个系数计算子图的左边及宽度

问题：在mounted中调用计算主图的原始宽高时，提示元素为空(通过document.getElementsByClassName('main-img')[this.curIndex]获取页面元素)，因此导致所有的计算都返回0

在mounted中，使用一个定时器就是好的，使用nextTick也是无效

mounted() {

this.screenX = document.body.offsetWidth;

this.getData();

// 有效

setTimeout(() => {

this.init()

}, 1000)

// 无效

this.$nextTick(() => {

this.init()

})

window.onresize = () => {

return (() => {

this.screenX = document.body.offsetWidth;

console.log('this.screenX', this.screenX);

this.init()

})()

}

},

不知道有没有更优雅的方法，能解决这个问题

// import Swiper from '@/components/common/swiper/swiper.vue'

// import { Swiper } from 'vux'

import myswiper from '@/components/common/myswiper/swiper.vue'

import imgData from '@/datas/detailImg.json'

import part1 from '@/datas/part_1.json'

import part2 from '@/datas/part_2.json'

import part3 from '@/datas/part_3.json'

import part4 from '@/datas/part_4.json'

export default {

name: "detai