IE9真的過時了嗎? vue2+elementUI2專案在IE9上的相容問題踩坑

shotCat發表於2018-09-18
IE9VueUI

前言

由於這次專案的定製化開發是面向國企的.需求主要集中在以下三點:

  • 1,字要大,更大,灰常大! //因為員工年紀比較大
  • 2,解析度得適配1024*768 //因為有的裝置會灰常陳舊 !
  • 3,必須相容IE,最起碼得相容IE9 ! //wtf !
  • 4,有時候你得去迎奉他們一些蹩腳的操作習慣和需求.// =.= 吐槽:捨得花那麼多錢定製化軟體,為什麼不能升級下顯示器,裝個Chrome啊! =.=

這次的定製化開發是在之前的老程式碼上新增新功能.老程式碼是12年用extjs 4.1編寫的.現在基本上沒有幾個人會寫extjs程式碼,並且客戶要求一個多月就要現場演示.所以最後決定用vue2+element2,然後掛載到extjs程式碼上.

下面就開始總結這次IE9踩坑.

1,準備工作

1.1 下載合適的vue版本.

修復v-for在IE上不能編譯和v-loading停止的問題.

最開始使用的是最新版2.5.16.後來發現v-for在IE上無法編譯.後來在issue #7946 上找到最簡單的辦法就是將版本降到2.5.15.然後問題解決了.考慮到時效性,可能後續版本又解決這個問題了.所以各位選擇自己合適的版本. 補充: 由於老程式碼用的是highcharts 3.在配合v-loading時,有時v-loading不能關閉.目前還沒找到好的解決辦法.現在是通過定時器在半秒後再關閉.當然你也可以用el-dialog來做個loading(=.=)

1.2 安裝babel-polyfill

解決ES6語法解析問題 雖然polyfill可以轉換ES6語法.但是建議編寫時還是使用ES5語法以防萬一.

1.3 儘量不要使用CSS3

雖然IE9支援部分css3,但還是很有限,像flex佈局,CSS3動畫這種就還是算了.

做到以上三點,基本上可以杜絕大部分常見的IE bug.但還是有一些bug是不能避免的.下面就逐個踩坑介紹.大家有遇到其他的,歡迎補充新增. ==注意:== 建議大家儘量減少使用watch.因為IE9對它的效能開銷很大!

2,el-table邊框線顯示問題

el-table在IE瀏覽器中經常會出現.中間的border線消失的問題.應該是IE邊框計算的問題,加上如下程式碼就行了

.el-table__body, .el-table__footer, .el-table__header {
    border-collapse: separate !important;
}
複製程式碼

3,橫向滾動條導致hover高度增加bug

在使用el-table有橫向滾動條時,發現在IE9上會出現table高度忽增忽減的情況.恭喜你遇到了IE9的專屬bug! 這個bug在IE10上是已經修復了的.

3.1 bug觸發條件:

  • 父級css裡設定了overflow-x:auto
  • 子元素長度超出,出現了滾動條.並且設有:hover時(el-table裡的tooltip) 這時你hover或拖動滾動條時就會出現table高度的忽增忽減.

3.2解決辦法:

  • 非el-table可以在table父級(指設有overflow屬性的父級)元素外面套一層div.<div style="height: 100%"></div> 但有時這樣可能會影響css樣式.這時你還可以選擇在父級元素上加上hover .father:hover{ height:100%;}
  • 使用el-table則只需要在el-table__body-wrappe上加height:100%
.el-table__body-wrapper{
    height: 100%;
}
複製程式碼

4,elementUI中動畫樣式的相容

elementUI在IE9下radio,checkbox的樣式不一致.原因就是使用了CSS3的transform和transition屬性. 解決辦法: 解決辦法是很簡單的,也是基本操作.就是給element的transform和transition屬性加上-ms-.

.el-select .el-input .el-select__caret{
   -ms-transition: transform .3s;
   -ms-transform: rotateZ(180deg);
}
複製程式碼

5,el-input 中v-model 有時不能正確反應輸入值變化

在使用el-input v-model的值有時不能根據輸入的值實時變化.目前還不是太瞭解是什麼原因造成的. 解決辦法:

  • 使用原生input框: 經測試使用原生input, v-model是可以正常變化的.如果你想保持v-input的樣式.可以給原生input加上el-input__inner的class.

  • 如果需要繼續使用v-input則需要新增@change事件.@change="function(modelVal){inputVal=modelVal}".這時每次輸完失焦後,都會觸發change事件將v-model值傳給inputVal.當然你不想邊輸入邊變化也可以用input事件.

6,el-upload不支援在IE9上傳

目前的解決辦法還是通過jquery.form解決的. jq的相容性和外掛庫還是最好最豐富的.建議大型複雜專案,最好都引入jQuery! 以備不時之需! 這裡在引入jQuery後,再引入jquery.form外掛.使用還是非常簡單的.不會的可以檢視下面這個例子:

<form id='fileForm' enctype="multipart/form-data" methods="post">
	<input type="file" id="fileInput" @change="update">
<form>
複製程式碼
update:function(){
	var _this=this;
	$('#fileForm').ajaxSubmit({
		url:url,  //url地址
		type:'post',
		enctype:'multipart/form-data',
		dataType:'json',
		success: function(res){
				$('#fileForm').restForm();  //重置表單
				if(res.code===0){
				console.log('上傳成功')
			}
		}
	})
}
複製程式碼

強烈警告: 在IE9中,如果返回的content-type為json格式時,此時IE會自動彈出下載彈窗,提醒你下載該檔案.此時,需要後端將content-type改為text/html形式,切記!!!

相關文章