记录一个element-ui弹出消息框的异常现象

今天使用了element-ui的弹出消息框alert、confirm。本来用的好好的，突然注意到一个细节，消息框弹出时，界面整体变窄了一点点，消息框结束后，页面又恢复原状，从开发者工具中的Elements中看到body多了一个style：padding-right:17px;

到另一个页面查看，body并没有多一个style。

经过一步一步摸索，发现是body高度比window高度大，导致右边出现了一个滚动条，有滚动条时body会多一个style,padding-right:17px;

window.innerWidt - document.body.offsetWidth正好是17px，于是就不纠结了突然的缩放了。

看element-ui的例子，document.body的高度是明显超过了window的高度的，但是它有overflow: hidden;的样式，#app有overflow-y: hidden;的样式

 

为了阻止body出现padding-right:17px的样式，可以添加如下代码（监控body的style的改变，然后重新设置），然后自己找个时机调用

		handlePadding:function(){
			let MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver

			let observer = new MutationObserver((mutations)=>{
				//console.log('mutations',mutations)
				mutations.forEach(item=>{
					if('style' == item.attributeName){
						document.body.style.padding = 0;
					}
				})
			})

			var body = document.body;

			var  options = {
			  'attributes':true
			} ;

			observer.observe(body, options);
		},

参考https://developer.mozilla.org/zh-CN/docs/Web/API/MutationObserver

监控body的style的改变

兼容性问题：

在ie、edge、windows版微信浏览器中，可能导致卡死的现象，其他使用了ie内核的浏览器在兼容模式下也可能会卡死，极速模式下相当于使用了其他内核，所以兼容性正常。