本人从事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.<el-dialog>组件属性的修改。
原先<el-diaog>的:size属性已经失效,取代的是:width属性。对应的关系是: size="large" => width="85%" ; size="tiny" => width="30%"; size="small" => width="50%"; size="full" => width="100%"。还有就是v-model 属性 替换为 visible.sync属性。
4.<el-switch>组件属性的修改。
这里只是属性名的改变,全局查找替换即可。on-text => active-text; off-text => inactive-text; on-value => active-value; off-value => inactive-value。
5.<el-rate>组件样式的变化。
这里提及的样式的变化是指原本在1.4.6版本的评分组件在升级之后,评分的五角星大小变小了,如果不在项目里面修改它的font-size的话,可能会导致原来和谐的样式由于升级之后而显得格格不入。因此建议还是调整一下评分组件的大小。
6.<el-input>组件事件的变化。
这里的变化是指@change事件,原先在1.4.6版本是输入框的value值一旦改变就会触发@change事件,在升级之后则是需要在输入框value值改变之后再触发blur事件才会触发@change事件。这一点会对页面交互上有比较大的影响,解决方法是可以把@change 事件改为@input事件。
以上就是我大致遇到的一下需要改动的点,希望对大家也能有点帮助。