多年前elementUI还是1.x版本,后来elementUI升级到2.x了,好多属性废弃了、新增了一些属性,同时也做了一些优化,而且官方给出消息1.x不再维护了。无奈之下我们只能升级至2.x版本;
以下是我自己升级项目插件的时候记录的一些步骤及项目中的改动,整理了一份,现在给大家分享一下,希望能给大家提供一些帮助;

element升级

1.1拉取最新分支

将最新relese上拉取最新分支,提供给升级版本测试专用

1.2element版本升级

1、拉取最新的分支,将element版本进行版本替换

卸载之前的element-ui版本    npm uninstall element-ui
安装最新版(想要安装的版本) npm install element-ui @2.15.6 -S

1.3引入位置替换

1、引入名称位置替换

在main.js中修改新增的 theme-chalk 主题:
将import 'element-ui/lib/theme-default/index.css替换为
import 'element-ui/lib/theme-chalk/index.css

2、在.babelrc 文件中替换 theme-default -----》theme-chalk

3、在node_modules\babel-plugin-component\README.md文件中替换  theme-default -----》theme-chalk

1.4引入的优先级问题

有的组件样式需要进行定制覆盖,于是就在组件里面用css scoped进行了同类名的样式替换,这样在开发环境下效果是符合预期 的,但是打包编译后,优先级就变了。于是发现是在main.js引入文件路径顺序的问题,之前一度以为不需要顺序,但其实还是 有影响的。
原来的配置:

import Vue from 'vue'
import App from './App.vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
Vue.use(ElementUI)

修改后的:

import Vue from 'vue'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import App from './App.vue' //这里要把App的引用顺序放到最后
Vue.use(ElementUI)

1.5页面全局报错修正

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

1.6组件属性的变化

1、<el-dialog>组件属性的修改

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

2、<el-switch>的变化组件属性的修改
这里只是属性名的改变,全局查找替换即可。

on-text => active-text
off-text => inactive-text 
on-color => active-color

on-value => active-value
off-value => inactive-value

3、<el-rate>的变化组件属性的修改

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

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

原来在input组件中可以用icon这个属性指定icon,例如

<el-input icon="search"></el-input>

或者
<el-input
  icon="search" :on-icon-click="syncBimFaceModel">
</el-input>

现在的话,这样写是不生效的
1、Icon可以通过prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增加显示图标,也可以通过 slot 来放置图标。
2、目前来说on-icon-click在 input 组件高版本是没有这个属性的,On-icon-click事件,目前是只能通过插槽来解决
所以如果你在项目中的input里用到了icon的属性,需要改成prefix-icon 或 suffix-icon:

<el-input suffix-icon="el-icon-search"></el-input>

或者:
<el-input v-model="keywords" placeholder="搜索模型..." clearable><i slot="suffix" class="el-input__icon el-icon-search" @click="syncBimFaceModel"></i>
</el-input>

6、slot-scope的变化组件属性的修改

这其实是vue在2.5.0里的变化
把scope换成了slop-scope
所以在element里面升级后,也把相应的用到scope的地方做修改就行了

7、checkbox
在更新后测试的时候发现checkbox挂了,于是查看,发现Checkbox Events的change事件的参数变了:
1.0Checkbox Events:
事件名称 说明 回调参数
change 当绑定值变化时触发的事件 event事件对象
2.0:Checkbox Events:
事件名称 说明 回调参数
change 当绑定值变化时触发的事件 更新后的值
所以,原来1.0判断change函数里面是这么写的:

handleCheckAllChange(event) {
    this.checkedCities = event.target.checked ? cityOptions : [];
    this.isIndeterminate = false;
  },

2.0是这样的:

handleCheckAllChange(val) {
    this.checkedCities = val ? cityOptions : [];
    this.isIndeterminate = false;
  },

7、Navmenu导航菜单
原来的menu是有两个样式供选择的,theme有两个可选值light, dark,现在没有这个属性了,默认就是chalk主题的白色,如果想要定制,需要另外设置。
参数 说明 类型 可选值 默认值
background-color 菜单的背景色(仅支持 hex 格式) string — #ffffff
text-color 菜单的文字颜色(仅支持 hex 格式) string — #409EFF
active-text-color 当前激活菜单的文字颜色(仅支持 hex 格式) string — #409EFF
但是这样设置会有弊端,如果项目经过定制样式改过主题颜色,那么这里就需要进行单独设置,而且还仅支持 hex 格式,这就需要计算出来颜色的具体值,而不能通过scss变量来控制。

9、日期选择器
日期选择器有了value-format属性 value-format=“yyyy-MM-dd”

placeholder    非范围选择时的占位内容    string    —    —
start-placeholder    范围选择时开始日期的占位内容    string    —    —
end-placeholder    范围选择时结束日期的占位内容 
增加start-placeholder="开始日期" end-placeholder="结束日期"

初始化值只需 this.form.dataRange = [startTime,endTime] //yyyy-MM-dd形式

10、el-table
表格中`<el-table

:data="tableData"
style="width: 100%"
:row-class-name="tableRowClassName"></table>`
:row-class-name="tableRowClassName"中回到函数之前参是:
  tableRowClassName(row, index) {
          ......
   }
升级完之后的回调函数是:

tableRowClassName({row, rowIndex}) {
          if (rowIndex === 1) {
            return 'warning-row';
          } else if (rowIndex === 3) {
            return 'success-row';
          }
          return '';
   }
之前参数是Index,换成了rowIndex,重要的是,参数要加{row,rowIndex}这个会受到影响,必须要进行修改

vue升级

1.1vue升级

npm install -s vue

目前我们项目版本是2.5.2,vue官方给的意见2.X版本最高置2.6.X,因此我们需要升级到目前最高版本即可,
升级vue最高版本2.6.14


程序员的佼佼者
86 声望14 粉丝

优秀的人,都是相投的,哈哈哈哈