element-ui的不稳定性

Posted 梦幻朵颜 Joyce Zhu

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了element-ui的不稳定性相关的知识,希望对你有一定的参考价值。

伤脑筋的版本升级

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作为追求稳定型的商用系统。

以上是关于element-ui的不稳定性的主要内容,如果未能解决你的问题,请参考以下文章

改造vue-quill-editor: 结合element-ui上传图片到服务器

在vuepress中实现类似element-ui 的代码预览效果

printf打印不稳定[关闭]

uniapp配置element-ui代码块

iOS App稳定性指标及监测

spring boot + vue + element-ui全栈开发入门——集成element-ui