傷腦筋的版本升級

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);

結語

鑒於當前element-ui升級後的表現，看來它背後的技術團隊還沒有具備像sring團隊那樣的良好軟件規範意識，所以不推薦element-ui作為追求穩定型的商用系統。

element-ui的不穩定性