Element 2.0.0-alpha.1 釋出,基於 Vue 2.0 的元件庫

類別: IT
Element

Element 2.0.0-alpha.1 已釋出,Element 是餓了麼開源的一套為開發者、設計師和產品經理準備的基於 Vue 2.0 的元件庫,提供了配套設計資源,幫助你的網站快速成型。

更新內容:

新特性

  • 綜合

    • 新增 theme-chalk主題

    • 增強以下元件的可訪問性:Alert、AutoComplete、Breadcrumb、Button、Checkbox、Collapse、Input、InputNumber、Menu、Progress、Radio、Rate、Slider、Switch 和 Upload

    • 新增佈局元件 Container、Header、Aside、Main 和 Footer

  • Button

    • 新增 round屬性,用於圓角按鈕 #6643

  • TimeSelect

    • 可以用 UpDown導航,用 Enter選中時間 #6023

  • TimePicker

    • 可以用方向鍵導航,用 Enter選中時間 #6050

    • 新增 start-placeholder和 end-placeholder,用於設定範圍選擇時兩個輸入框的佔位符 #7169

  • Tree

    • 子節點在首次被展開之前不進行渲染 #6257

    • 新增 check-descendants屬性,設定 lazy模式下勾選節點時,是否完全展開整個子樹 #6235

  • Tag

    • 新增 size屬性 #7203

  • Datepicker

    • type 為 datetimerange時可以使用 timeFormat格式化時間選擇器 #6052

    • 新增 start-placeholder和 end-placeholder,用於設定範圍選擇時兩個輸入框的佔位符 #7169

  • MessageBox

    • 新增 closeOnHashChange屬性 #6043

    • 新增 center屬性,提供居中佈局 #7029

    • 新增 roundButton屬性,使得內部按鈕為圓角按鈕 #7029

    • 新增 dangerouslyUseHTMLString屬性,使得 message支援傳入 HTML 字串* #6043

  • Dialog

    • 新增 widthfullscreenappend-to-body屬性,支援巢狀使用

    • 新增 center屬性,提供居中佈局 #7042

    • 新增 focus-after-closedfocus-after-open屬性,支援無障礙訪問 #6511

  • ColorPicker

    • 增加手動輸入色值的支援 #6167

    • 新增 size屬性,用於控制元件的大小 #7026

    • 新增 disabled屬性,用於禁用元件 #7026

  • Message

    • 圖示部分使用 icon 代替圖片,從而支援通過 CSS 修改圖示背景色 #6207

    • 新增 dangerouslyUseHTMLString屬性,使得 message屬性支援傳入 HTML 字串* #6207

    • 新增 center屬性,提供居中佈局 #6875

  • Notification

    • 新增 position屬性,用於配置 Notification 出現的位置 #6231

    • 新增 dangerouslyUseHTMLString屬性,使得 message屬性支援傳入 HTML 字串* #6231

    • 新增 showClose屬性,用於隱藏關閉按鈕 #6402

  • Rate

    • 新增 show-score屬性,控制是否在右側顯示當前分數 #6295

  • Tabs

    • 新增 tab-position屬性,控制選項皮膚內容顯示的上、下、左、右四個方向 #6096

  • Radio

    • 增加 border屬性和 size屬性 #6690

  • Checkbox

    • 增加 border屬性和 size屬性 #6690

  • Alert

    • 新增 center屬性,提供居中佈局 #6876

  • Menu

    • 新增 background-colortext-color和 active-text-color屬性,分別用於設定選單的背景色、選單的文字顏色和當前啟用選單的文字顏色 #7064

  • Form

    • 新增 inline-message屬性,設定後校驗資訊會以行內樣式顯示 #7032

    • 新增 status-icon屬性,用於在輸入框中顯示校驗結果反饋圖示 #7032

  • Input

    • 新增 suffixprefix的 slot,以及 suffixIconprefixIcon屬性,用於給輸入框內部增加前置和後置內容 #7032

  • Breadcrumb

    • 新增 separator-class屬性,可使用圖示作為分隔符 #7203

  • Steps

    • 新增 simple屬性,用於開啟簡潔風格的步驟條 #7274

修復

  • DatePicker

    • 選擇週數時,v-model結果返回該周第二天的問題 #6038

    • 在 daterange型別中,第一次的輸入會被清空的問題 #6021

  • DateTimePicker

    • 和 TimePicker 相互影響的問題 #6090

    • 選擇時間小時和秒可超出限制的問題 #6076

  • TimePicker

    • 失去焦點時無法正確改變 v-model值的問題 #6023

  • Dialog

    • 當含有下拉框時,下拉框的開啟和關閉會造成文字虛晃的問題 #6088

  • Select

    • 提升效能,修復元件銷燬時可能導致 Vue dev-tool 卡死的問題 #6151

非相容性更新

  • 綜合

    • 移除 theme-default

    • 表單元件的 change事件和 Pagination 的 current-change事件現在僅響應使用者互動

    • Button 和表單元件的 size屬性不再接受 large值,可接受 mediumsmall和 mini

    • 為了方便使用第三方圖示,Button 的 icon屬性、Input 的 prefix-icon和 suffix-icon屬性、Steps 的 icon屬性現在需要傳入完整的圖示類名

  • Dialog

    • 移除 size屬性。現在 Dialog 的尺寸由 width和 fullscreen控制

    • 移除通過 v-model控制 Dialog 顯示和隱藏的功能

  • Rate

    • text-template屬性更名為 score-template

  • Dropdown

    • menu-align屬性變更為 placement,增加更多方位屬性

  • Transfer

    • footer-format屬性更名為 format

  • Switch

    • on-text和 off-text屬性不再有預設值

  • Tag

    • type屬性現在支援 successinfowarning和 danger四個值

  • Menu

    • 移除 theme屬性。現在通過 background-colortext-color和 active-text-color屬性進行顏色的自定義

  • Input

    • 移除 icon屬性。現在通過 suffix-icon屬性或者 suffix具名 slot 來加入尾部圖示

    • 移除 on-icon-click屬性和 click事件。現在如果需要為輸入框中的圖示新增點選事件,請以具名 slot 的方式新增圖示

  • Autocomplete

    • 移除 custom-item屬性。現在通過 scoped slot自定義輸入建議列表項的內容

  • Table

    • 移除通過 inline-template自定義列模板的功能

  • Steps

    • 移除 center屬性

    • 現在步驟條將預設充滿父容器

* 在網站上動態渲染任意 HTML 是非常危險的,因為容易導致 XSS 攻擊。因此請在 dangerouslyUseHTMLString開啟的情況下,確保 message的內容是可信的,永遠不要將使用者提交的內容賦值給 message屬性。

更新日誌

https://github.com/ElemeFE/element/releases/tag/v2.0.0-alpha.1

文件

http://element.eleme.io/2.0/#/zh-CN/component/installation

安裝

npm install [email protected]
import Vue from 'vue'import Element from 'element-ui'import 'element-ui/lib/theme-chalk/index.css'Vue.use(Element)

說明

2.0.0-alpha.1版本包含了新主題的全部內容,歡迎各位安裝預覽。由於目前處於 alpha 階段,所以不建議直接用在生產中。

2.0.0-alpha.1並未包含全部的功能更新,部分元件(如 Table)仍在升級之中。接下來我們會繼續強化元件功能,請大家耐心等待。

版本遷移

如果需要從 1.4 版本遷移到 2.0.0-alpha.1,請對照更新日誌中的「非相容性更新」部分進行修改。在 2.0.0 正式版釋出時,我們希望能夠提供一個遷移工具,方便各位遷移程式碼。

詳情請參閱:https://github.com/ElemeFE/element/issues/7304

下載地址:

  • Source code (zip)

  • Source code (tar.gz)

Element 2.0.0-alpha.1 釋出,基於 Vue 2.0 的元件庫原文請看這裡