vue中等頁(yè)面dom加載完畢后執(zhí)行某方法？

1. 最近在玩一個(gè)類似拼圖的東東，業(yè)務(wù)場(chǎng)景就是在主圖加載到頁(yè)面的時(shí)候，計(jì)算主圖相對(duì)頁(yè)面容器的縮小放大系數(shù)，通過(guò)這個(gè)系數(shù)計(jì)算子圖的左邊及寬度
2. 問(wèn)題：在mounted中調(diào)用計(jì)算主圖的原始寬高時(shí)，提示元素為空（通過(guò)document.getElementsByClassName('main-img')[this.curIndex]獲取頁(yè)面元素），因此導(dǎo)致所有的計(jì)算都返回0
3. 在mounted中，使用一個(gè)定時(shí)器就是好的，使用nextTick也是無(wú)效

mounted() {
    this.screenX = document.body.offsetWidth;
    this.getData();
    // 有效
    setTimeout(() => {
      this.init()
    }, 1000)
    // 無(wú)效
    this.$nextTick(() => {
      this.init()
    })
    window.onresize = () => {
      return (() => {
        this.screenX = document.body.offsetWidth;
        console.log('this.screenX', this.screenX);
        this.init()
      })()
    }
  },

不知道有沒(méi)有更優(yōu)雅的方法，能解決這個(gè)問(wèn)題

// 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: "detail",
  components: {
    // Swiper,
    myswiper
  },
  data() {
    return {
      flag: false, //控制部件選擇是否出現(xiàn)
      containerImg: '', //當(dāng)前滑到的圖片容器
      // mainImgLeft: 0,
      // mainImgTop: 0,
      imgList: [], //圖片list
      curIndex: 0, //當(dāng)前選中的那個(gè)一個(gè)list的索引
      screenX: '', //瀏覽器屏幕的可視區(qū)域?qū)挾?，?jì)算沒(méi)張圖片的tranform
      partList: [], //部件的list
      flagMask: false, //點(diǎn)擊圖片，查看大圖效果的標(biāo)識(shí)
      warpTop: 0 //計(jì)算大圖的top值
    };
  },
  mounted() {
    this.screenX = document.body.offsetWidth;
    this.getData();
    // 有效
    // setTimeout(() => {
      this.init()
    // }, 500)
    // // 無(wú)效
    // this.$nextTick(() => {
    //   this.init()
    // })
    window.onresize = () => {
      return (() => {
        this.screenX = document.body.offsetWidth;
        console.log('this.screenX', this.screenX);
        this.init()
      })()
    }
  },
  methods: {
    // 獲取圖形數(shù)據(jù)
    getData() {
      this.imgList = imgData;
    },
    // 獲取局部列表
    getPartData(id) {
      this.flag = true;
      switch (id) {
        case "0":
          this.partList = part1;
          break;
        case "1":
          this.partList = part2;
          break;
        case "2":
          this.partList = part3;
          break;
        case "3":
          this.partList = part4;
          break;
      }

    },
    init() {
      // 進(jìn)來(lái)時(shí)通過(guò)索引找到當(dāng)前的輪播項(xiàng)，判斷是否已經(jīng)加載過(guò)，如果已經(jīng)加載過(guò)，則不加載，如果沒(méi)有加載過(guò)，則設(shè)置為加載過(guò)，加載
      const curItem = this.imgList[this.curIndex];
      // if (curItem.loaded) {
      //   return
      // } else {
      //   curItem.loaded = true;

      this.containerImg = document.getElementsByClassName('main-img')[this.curIndex];
      // 獲取大圖元素的真實(shí)寬高
      this.bodyImg = this.getRealWH(this.containerImg);
      // 計(jì)算width的縮放比例 375
      this.xRatio = this.bodyImg.x / this.containerImg.offsetWidth;
      // this.xRatio = this.bodyImg.x / 375;
      // 計(jì)算height的縮放比例 211
      this.yRatio = this.bodyImg.y / this.containerImg.offsetHeight;
      // this.yRatio = this.bodyImg.y / 211;
      // this.resetStyle('part_A', 'part_A');
      // this.resetStyle('part_B', 'part_B');
      var tempArr = curItem.mainPart || [];
      for (var i = 0; i < tempArr.length; i++) {
        this.resetStyle('main_' + tempArr[i].pid, 'main_' + tempArr[i].pid);
      }
      // }
    },
    /**
     * 獲取img的真實(shí)寬高
     * @Author   shunzizhan
     * @Email    shunzizhan@163.com
     * @DateTime 2017-10-24T10:42:03+0800
     * @param    {[type]}                 myimage [description]
     * @return   {[type]}                         [description]
     */
    getRealWH(myimage) {
      var rw, rh;
      if (typeof myimage.naturalWidth == "undefined") {　　 // IE 6/7/8　
        var i = new Image();　　
        i.src = myimage.src;　　
        rw = i.width;　　
        rh = i.height;
      } else {　　 // HTML5 browsers
        rw = myimage.naturalWidth;　　
        rh = myimage.naturalHeight;
      }
      return { x: rw, y: rh }
    },
    /**
     * 重新設(shè)置元素的樣式
     * @Author   shunzizhan
     * @Email    shunzizhan@163.com
     * @DateTime 2017-10-24T10:39:46+0800
     * @param    {[type]}                 ele    [當(dāng)前點(diǎn)擊的元素]
     * @param    {[type]}                 eleTag [目標(biāo)元素]
     * @param    {[type]}                 xRatio [寬度縮放比例]
     * @param    {[type]}                 yRatio [高度縮放比例]
     * @return   {[type]}                        [description]
     */
    resetStyle(ele, eleTag) {
      if (event) {
        event.stopPropagation(); //阻止冒泡
      }

      var xRatio = this.xRatio;
      var yRatio = this.yRatio;
      var _dom = document.getElementById(ele);

      var partAImg = this.getRealWH(_dom);
      // 沒(méi)個(gè)部位，坐標(biāo)，尺寸均一致
      var x = _dom.getAttribute('data-x');
      var y = _dom.getAttribute('data-y');

      // var tempX = this.mainImgLeft / xRatio;
      var tempX = x / xRatio;
      var tempW = partAImg.x / xRatio;


      // var tempY = this.mainImgTop / yRatio;
      var tempY = y / yRatio;
      var tempH = partAImg.y / yRatio;

      var _tagDom = document.getElementById(eleTag);
      _tagDom.src = _dom.src;
      _tagDom.style.left = tempX + 'px';
      _tagDom.style.top = tempY + 'px';
      _tagDom.style.width = tempW + 'px';
      _tagDom.style.height = tempH + 'px';
    },
    // 子組件翻頁(yè)時(shí)，更改索引，父級(jí)同步響應(yīng)
    changeImg(index) {
      // console.log('計(jì)算屬性-父組件', index)
      this.curIndex = index;
      this.init();
      this.flag = false;
    },
    // 點(diǎn)擊大圖，查看放大圖
    resetTop() {
      this.flagMask = !this.flagMask;
      if (this.flagMask) {
        this.warpTop = (document.documentElement.clientHeight - document.getElementsByClassName('swiper-warp')[0].offsetHeight) / 2;
      } else {
        this.warpTop = 0;
      }
    }
  }
}