傷腦筋的版本升級
element-ui升級到2.0版本了!
element-ui作為比較成熟的廣為人知的前端框架,原本滿懷熱情的去學習,也基於element-ui搭建出了一套系統,可是它居然升級了!
別的技術升級都是兼容舊版本,可是它升級后我所有的日期控件全部癱瘓。。。
別的技術升級后都是保留原有index.css或index.js官方鏈接,它居然連舊版本的css鏈接都廢棄了!等於樣式全部廢棄!這對於商用系統怎么接受的了。。。
由於日期控件全部癱瘓,css鏈接被廢棄,所以我現在要面臨的是重測系統!
所以別的技術升級我是高興,比如spring,但是element-ui升級后,我卻一點兒也高興不起來,因為我要重測我整個系統!
日期控件癱瘓表現
這是element-ui 1.0版本的日期控件代碼:
<el-date-picker v-model="searchForm.fdEndTime" align="right" type="date" placeholder="選擇日期" :picker-options="pickerOptions1" @change="getTime"> </el-date-picker>
最后那個getTime方法是百度出來的,解決獲取日期結果值不是輸入框里看到的日期字符串的方法,getTime代碼為:
getTime(date){
vue.searchForm.fdEndTime = date;
}
這里的vue是我的element-ui對象,也是Vue對象。
加上這個getTime方法之后,果然通過vue對象可以獲取正確的期望中的日期字符串,可是升級到2.0版本后,這里的date傳參居然變成了Date對象本身!這個概念轉換是對的,可是你有沒有想過舊系統已經基於以前版本開發的代碼啊,全部要改啊!。。。
只好把項目里所有getTime方法里的date傳參不再進行簡單賦值,而是通過日期字符串格式化后再賦值:
getTime(date){
var date2 = date.format("yyyy-MM-dd");
vue.searchForm.fdEndTime = date2;
}
當然,在這之前,你需要對Date類做擴展(百度一大堆):
Date.prototype.format = function(fmt) {
var o = {
"M+" : this.getMonth()+1, //月份
"d+" : this.getDate(), //日
"h+" : this.getHours(), //小時
"m+" : this.getMinutes(), //分
"s+" : this.getSeconds(), //秒
"q+" : Math.floor((this.getMonth()+3)/3), //季度
"S" : this.getMilliseconds() //毫秒
};
if(/(y+)/.test(fmt)) {
fmt=fmt.replace(RegExp.$1, (this.getFullYear()+"").substr(4 - RegExp.$1.length));
}
for(var k in o) {
if(new RegExp("("+ k +")").test(fmt)){
fmt = fmt.replace(RegExp.$1, (RegExp.$1.length==1) ? (o[k]) : (("00"+ o[k]).substr((""+ o[k]).length)));
}
}
return fmt;
}
/************************* 以下是本類測試方法 *********************************/
var mydate = new Date();
var mydateStr = mydate.format("yyyy-MM-dd");
console.log('yyyy-MM-dd mydateStr=='+mydateStr);
var mytime = new Date().format("yyyy-MM-dd hh:mm:ss");
console.log('yyyy-MM-dd hh:mm:ss mytime==='+mytime);
switch開關控件癱瘓表現
switch開關,現在改成這樣了:
然后獲取值和設置值的舊的那一套全部失效,原因是現在的值默認是true和false,而原來的舊版本的值是可以直接設置值為1或0或其它什么值的,所以導致設置值和獲取值全部失效。
結語
鑒於當前element-ui升級后的表現,看來它背后的技術團隊還沒有具備像sring團隊那樣的良好軟件規范意識,所以不推薦element-ui作為追求穩定型的商用系統。