最近在玩一個類似拼圖的東東，業務場景就是在主圖加載到頁面的時候，計算主圖相對頁面容器的縮小放大系數，通過這個系數計算子圖的左邊及寬度

問題：在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: "detail",

components: {

// Swiper,

myswiper

},

data() {

return {

flag: false, //控制部件選擇是否出現

containerImg: '', //當前滑到的圖片容器

// mainImgLeft: 0,

// mainImgTop: 0,

imgList: [], //圖片list

curIndex: 0, //當前選中的那個一個list的索引

screenX: '', //瀏覽器屏幕的可視區域寬度，計算沒張圖片的tranform

partList: [], //部件的list

flagMask: false, //點擊圖片，查看大圖效果的標識

warpTop: 0 //計算大圖的top值

};

},

mounted() {

this.screenX = document.body.offsetWidth;

this.getData();

// 有效

// setTimeout(() => {

this.init()

// }, 500)

// // 無效

// this.$nextTick(() => {

// this.init()

// })

window.onresize = () => {

return (() => {

this.screenX = document.body.offsetWidth;

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

this.init()

})()

}

},

methods: {

// 獲取圖形數據

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() {

// 進來時通過索引找到當前的輪播項，判斷是否已經加載過，如果已經加載過，則不加載，如果沒有加載過，則設置為加載過，加載

const curItem = this.imgList[this.curIndex];

// if (curItem.loaded) {

// return

// } else {

// curItem.loaded = true;

this.containerImg = document.getElementsByClassName('main-img')[this.curIndex];

// 獲取大圖元素的真實寬高

this.bodyImg = this.getRealWH(this.containerImg);

// 計算width的縮放比例 375

this.xRatio = this.bodyImg.x / this.containerImg.offsetWidth;

// this.xRatio = this.bodyImg.x / 375;

// 計算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的真實寬高

* @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 }

},

/**

* 重新設置元素的樣式

* @Author shunzizhan

* @Email shunzizhan@163.com

* @DateTime 2017-10-24T10:39:46+0800

* @param {[type]} ele [當前點擊的元素]

* @param {[type]} eleTag [目標元素]

* @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);

// 沒個部位，坐標，尺寸均一致

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';

},

// 子組件翻頁時，更改索引，父級同步響應

changeImg(index) {

// console.log('計算屬性-父組件', index)

this.curIndex = index;

this.init();

this.flag = false;

},

// 點擊大圖，查看放大圖

resetTop() {

this.flagMask = !this.flagMask;

if (this.flagMask) {

this.warpTop = (document.documentElement.clientHeight - document.getElementsByClassName('swiper-warp')[0].offsetHeight) / 2;

} else {

this.warpTop = 0;

}

}

}

}

總結

以上是生活随笔為你收集整理的dom加载完再执行 vue_vue中等页面dom加载完毕后执行某方法？的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。