场景 : 图片 自适应不同显示器 width : 100%
场景二 : 图片上 定位了一个导航, 要与图片缩放大小 的 height 同步
思路: 获取图片变化的height 给 nav 导航
解决:
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/ce41794ebd9de9fcc4a7e309cb45604a.png)
<el-carousel :interval="5000" arrow="hover" :height="img_height + 'px'" :loop="true">
<el-carousel-item v-for="item in bannerItem" :key="item.ad_id">
<el-image
:src="item.image_url"
alt=""
style="width:100%;cursor:pointer"
@click="Jump(item.link_url)"
@load="img_load"
ref="img_ref"
id="test"
></el-image>
</el-carousel-item>
</el-carousel>
步骤二 图片加载函数 获取图片高度
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/7b8cb722174cb6d66119c2984a83eaab.png)
img_load() {
var _test = document.getElementById('test') //若是jq,则直接将此代码换成 var _test = $("#test"); 即可。
this.$nextTick(() => {
this.img_height = _test.clientHeight
})
},
步骤三 将高度height 同步给 导航 nav
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/54d88f1e639347ad755dbeb280680377.png)
步骤四 不同的 显示器切换时 nav 加载一次后 不再变化
监听屏幕宽度变化 再去给 height 赋值 新的图片高度
![在这里插入图片描述](https://i-blog.csdnimg.cn/blog_migrate/d0b7323a5592f6c551c7925248b21103.png)
注销window.onresize事件
destroyed() {
window.onresize = null
},