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

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

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

  3. 在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()
})()
}
},

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

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

// 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    [email protected]
* @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    [email protected]
* @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;
}
}
}
}

回答

<img />，然后确定元素是空，而不是宽高是0吗？因为undefined.offWidth会报错。
如果是的话，给img绑定个onload事件，在这里获取宽高，感觉是dom标签有了，但是资源还没加载，所以没大小。

dom 元素 .main-img 是你写死在组件的还是获取后台获取数据再循环渲染在组件上的？
如果是后者，确保要在获取并渲染到组件上后再通过document.getElementsByClassName('main-img')[this.curIndex]获取页面元素

这个问题最后是怎么解决的？兄弟，我也遇到了类似的问题，nextTick不好用，我想在dom加载完成后再执行时事件，求解惑

以上是 【Vue】vue中等页面dom加载完毕后执行某方法？ 的全部内容， 来源链接： utcz.com/a/76931.html

回到顶部