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

目前我遇到的就是這麼多，隨着項目深刻，可能還會遇到更多的問題和兼容版本的問題，咱們能夠共同探討。