场景: 整体宽度固定,左右布局的结构,左边是图片或者图标,即左边元素的宽度不固定,右边宽度需要根据左边元素动态计算。
<div class="container">
<section class="left">
<div v-if="flag==1" class="img-container">
<img src="./test/png" alt=" />
</div>
<div v-else class="icon-container">
<p>这是图标</p>
</div>
</section>
<section class="right" :style="num" id="right_1">
这是右侧的区域
</section>
</div>
思路:在vue的mounted生命周期中获取左边渲染元素的宽度,从而计算右侧宽度。
let temp = "0"
let w = '100%'
let ele = null
this.$nextTick(() => {
if (this.flag==1) {
ele = document.querySelector(".img-container")
temp = ele ? ele.offsetWidth + 'px' : '0'
} else {
ele = document.querySelector(".icon-container")
temp = ele ? ele.offsetWidth + 'px' : '0'
}
this.num = {width: `calc(${w} - ${temp})`} //这种写法无法兼容IE
//以下通过dom操作可以兼容IE,另IE不兼容模板字符串,需用普通字符串拼接写法
let ele = document.getElementById("right_1")
if (ele) {
ele.style.width = "calc(100% - " + temp + ")"
}
})
附:IE不兼容报错截图,Error in nextTick:"Error:未指明的错误。”