Element ui轮播图自适应+Cannot read property ‘height’ of undefined报错处理
在element-ui中轮播图carousel组件容器的高度是固定写死的,想要达到自适应的效果 需要用:height将高度动态绑定。特此声明:此方法是我在网上搜的并在其基础上做了一定改进,原文在此原文讲解的比较详细。所以我没有再做过多的赘述。并在最后加上了我遇到问题以及处理方法。1.template html代码<div class="boxdiv" ><...
在element-ui中轮播图carousel组件容器的高度是固定写死的,想要达到自适应的效果 需要用:height
将高度动态绑定。
特此声明:此方法是我在网上搜的并在其基础上做了一定改进,原文在此
原文讲解的比较详细。所以我没有再做过多的赘述。并在最后加上了我遇到问题以及处理方法。
1.template html代码
<div class="boxdiv" >
<el-carousel indicator-position="outside" :height="autoHeight+'px'">
<el-carousel-item v-for="item in img" :key="item.id">
<div>
<img :src="item.src" ref="image" @load="getAutoHeight" class="carousel_image_type">
</div>
</el-carousel-item>
</el-carousel>
</div>
2.获取图片按高度并监听浏览器resize变化
当调整浏览器窗口的大小时,发生 resize 事件。
resize() 方法触发 resize 事件,或规定当发生 resize 事件时运行的函数。
mounted () {
this.getAutoHeight();
//增加监听事件,窗口变化时得到高度。
window.addEventListener('resize',this.getAutoHeight,false)
},
methods:{
//自动获取图片高度,并赋给轮播图
getAutoHeight(){
this.$nextTick(()=>{
this.autoHeight=this.$refs.image[0].height
})
}
}
3.加载时方法渲染
在HTML代码中,绑定加载事件。@load=“getAutoHeight”
<img :src="item.src" ref="image" @load="getAutoHeight" class="carousel_image_type">
4.页面报错
经过以上操作后在有轮播图的页面可以正常使用,但是在没有图片的页面会报错:
TypeError: Cannot read property ‘height’ of undefined
方法一:为什么我在这个页面监听的方法,跳转到下个页面还在监听,这本就不合理。其实是因为我们没有在销毁组件时移除监听。window全局对象依然存在,所以仍然存在监听。
mounted () {
this.getAutoHeight();
window.addEventListener('resize',this.getAutoHeight,false)
},
//销毁组件时移除监听
destroyed(){
window.removeEventListener("resize",this.getAutoHeight,false);
},
方法二:
类似的错误还有很多,大多都是 TypeError: Cannot read property ‘xxx’ of undefined
出现这种错误的原因很简单,就是你调用该方法或函数的字符串或数组、对象等等出现了为空的情况,加一个判断就好了。
mounted () {
window.addEventListener('resize', () => {
let isImg =this.$refs.image;
//判断该页面是否存在图片
if(isImg){
this.autoHeight = isImg[0].height
}
}, false)
},
建议用方法一。
更多推荐
所有评论(0)