element ui 版本升级从1.4.6到2.4.6 填坑随笔

本人从事web前端工作也有四年的时间了，前些日子项目需要，把element ui组件从之前的1.4.6版本直接升级到2.4.6的最新版本。期间遇到了不少问题，想着以后也能用到就记录下来了。

1.element ui 图标库的更新。

这一点比较改动比较简单，主要是版本升级之后，原先的图标使用的名称有些许的改动。但使用方法没有啥变化，所以只需要找到自己使用图标的地方改变名字即可。

2.页面全局报错[Injection "elFormItem" not found]。

这个错误是因为在element ui 版本升级过后，对应的vue版本 及 vue-template-complier的版本未升级到2.5.3的原因。只要在package.json文件中找到对应的依赖声明的地方，更改版本号至2.5.3，npm install即可。

3.组件属性的修改。

原先的:size属性已经失效，取代的是:width属性。对应的关系是: size="large" => width="85%" ;  size="tiny" => width="30%";  size="small" => width="50%";  size="full" => width="100%"。还有就是v-model 属性 替换为 visible.sync属性。

4.组件属性的修改。

这里只是属性名的改变，全局查找替换即可。on-text => active-text;  off-text => inactive-text; on-value => active-value; off-value => inactive-value。

5.组件样式的变化。

这里提及的样式的变化是指原本在1.4.6版本的评分组件在升级之后，评分的五角星大小变小了，如果不在项目里面修改它的font-size的话，可能会导致原来和谐的样式由于升级之后而显得格格不入。因此建议还是调整一下评分组件的大小。

6.组件事件的变化。

这里的变化是指@change事件，原先在1.4.6版本是输入框的value值一旦改变就会触发@change事件，在升级之后则是需要在输入框value值改变之后再触发blur事件才会触发@change事件。这一点会对页面交互上有比较大的影响，解决方法是可以把@change 事件改为@input事件。

以上就是我大致遇到的一下需要改动的点，希望对大家也能有点帮助。