最近单位代码重构,记录一下升级element-ui升级过程及升级之后引发的问题
升级步骤
1、第一步:先卸载之前的版本 npm uninstall element-ui
2、第二步:安装最新版(想要安装的版本) npm install element-ui @2.1.0 -S(注:没装最新版,怕有什么问题)
3、第三步:最重要的一步 在main.js中修改新增的 theme-chalk 主题:
将import 'element-ui/lib/theme-default/index.css'替换为import 'element-ui/lib/theme-chalk/index.css'。
升级后的问题
升级之后其实最大的问题是:新旧版本的好多属性都不一样,有些属性新版本不维护了。给大家说一些我遇到的例子:
1、el-dialog 老版本通过v-model来控制显示隐藏,2.x之后这个属性被去掉了,所以我们需要把这种写法换成:visible.sync
2、el-dialog 老版本有size属性,用来控制弹框的大小,新版本需要换成width来控制。
3、原来在input组件中可以用icon这个属性指定icon,例如:
<el-input
icon="search">
</el-input>
而新版本则需换成prefix-icon 或 suffix-icon,例如:
<el-input
suffix-icon="el-icon-search">
</el-input>