Vue 动态Style宽度使用calc()函数计算不兼容IE,Error in nextTick:"Error:未指明的错误。”

504 阅读1分钟

场景: 整体宽度固定,左右布局的结构,左边是图片或者图标,即左边元素的宽度不固定,右边宽度需要根据左边元素动态计算。

<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:未指明的错误。”

c93a7ecc92af748714cdd59a8b83369.png