Element-ui升级2.0后初体验

若是你在使用Vue和Element-ui进行前端开发，那么就会知道Element在2017年10月27日升级到了2.0.0 Carbon的版本，改动能够说仍是有些大的。可想而知，有的人选择按兵不动，有的人选择先睹为快。

如今打开Element-ui的官网，切换到1.4.12的文档，能够看到一个提示消息框：

Element 1.x 已中止维护，请升级至 2.x

因此仍是建议尽早升级比较好，顺便也能够一块儿升级一下vue到2.5版本以上。下面我会介绍一些我在升级项目的过程当中遇到的问题和须要注意的地方。

升级后的版本：
element-ui：2.0.4（最新版本已经到2.0.7）
vue：2.5.4

先放两张图，直观体会一下：

升级前：

升级后的：

在这个项目中，我基本用的都是Element原生样式，没有作过多修改，因此升级后的第一效果就是这样的，能够看到升级后第一印象是页面变“白”了，也能够说变淡了，尤为是侧边栏、导航菜单，之前是能够选择深色的主题，如今没有这个theme-default预设了，新增了新的主题chalk，致使整个页面都是白白的。表格的表头原来也是有背景颜色区分的，如今的chalk主题下表头的颜色区分不是很明显。而后以前用的tag、按钮之类的都变大了。我的理解之后官方可能会出别的系列的主题，这样方便拆解和设计。

可是在我作的另外一个项目中，作了更深层次的样式的定制，颜色、边框、圆角都经过element-variables.scss对一些变量进行了修改，反而以为影响不大，甚至更天然了些：

而后下面说一下我遇到的须要修改的地方。

1. 引入的css文件路径变了

原来是：
import 'element-ui/lib/theme-default/index.css'
如今须要修改为：
import 'element-ui/lib/theme-chalk/index.css'

2. 样式引入的优先级问题

以前遇到这样一个问题，有的组件样式须要进行定制覆盖，因而就在组件里面用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)

3. Icon的变化

原来在input组件中能够用icon这个属性指定icon，例如

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

如今的话，这样写是不生效的：

能够经过prefix-icon 和 suffix-icon 属性在 input 组件首部和尾部增长显示图标，也能够经过 slot 来放置图标。

因此若是你在项目中的input里用到了icon的属性，须要改为prefix-icon 或 suffix-icon：

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

可是button组件就仍是可使用icon属性，但须要传入完整的图标类名：

<el-button type="primary" icon="el-icon-search">搜索</el-button>

缘由是：

为了方便使用第三方图标，Button 的 icon 属性、Input 的 prefix-icon 和 suffix-icon 属性、Steps 的 icon 属性如今须要传入完整的图标类名

4. modal的变化

以前给不须要宽度的modal设了width: auto;，这样若是里面内容为空的时候基本没有宽度，更新后，若是没有内容，默认会铺满整个屏幕。

5. NavMenu 导航菜单

原来的menu是有两个样式供选择的，theme有两个可选值light, dark，如今没有这个属性了，默认就是chalk主题的白色，若是想要定制，须要另外设置。

参数	说明	类型	可选值	默认值
background-color	菜单的背景色（仅支持 hex 格式）	string	—	#ffffff
text-color	菜单的文字颜色（仅支持 hex 格式）	string	—	#409EFF
active-text-color	当前激活菜单的文字颜色（仅支持 hex 格式）	string	—	#409EFF

可是这样设置会有弊端，若是项目通过定制样式改过主题颜色，那么这里就须要进行单独设置，并且还仅支持 hex 格式，这就须要计算出来颜色的具体值，而不能经过scss变量来控制。

6. slot-scope

这实际上是vue在2.5.0里的变化
把scope换成了slop-scope
因此在element里面升级后，也把相应的用到scope的地方作修改就好了

7. checkbox

在更新后测试的时候发现checkbox挂了，因而查看，发现Checkbox Events的change事件的参数变了：

1.0:

Checkbox 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;
      },

目前我遇到的就是这么多，随着项目深刻，可能还会遇到更多的问题和兼容版本的问题，咱们能够共同探讨。