vue2+elementUI2專案在IE9上的相容問題踩坑
由於這次專案的定製化開發是面向國企的.需求主要集中在以下三點:
- 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觸發條件:
overflow-x:auto
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形式,切記!!!