檢視更新科技釋出 View UI 元件庫(即 iView 4.0),超過50項更新

發表於2019-10-09

寫在前面

金秋十月,iView 4.0 如約而至。但是標題資訊量有點大,所以先來解讀一下標題。

iView 作者 Aresn 於 2019 年創辦了北京檢視更新科技有限公司,開始自由、全職地維護 iView 及其相關的軟體。View UI 即為原先的 iView,從 2019 年 10 月起正式更名為 View UI,並使用全新的 Logo。iView 作者將在新倉庫 https://github.com/view-design/ViewUI 繼續開發 iView 4.0 和後續版本,以及維護工作。原倉庫 iView 作者不再繼續提交內容。

簡單說就是,我們將 GitHub 遷移到了:

https://github.com/view-design/ViewUI

對於絕大部分使用者來說,使用沒有任何影響,之後的 issue 和 pr 也請大家到新的倉庫進行提交,當然包括 Star!

請相信,全新的 View UI 元件庫會帶來更強大的功能和更出色的體驗。由於現在已經全職維護,這裡也可以向大家保證,每 1~2 周迭代一個版本。

更新方法

4.0 版本的核心是功能增強體驗優化,基本沒有不相容的,大家可以放心升級,主要的更新內容下文會逐一介紹。

更新方法很簡單,修改 package.json 中 iview 的版本號為 4.0.0:

"dependencies": {
    "iview": "^4.0.0"
}

然後執行 npm update iview 即可。

同時,我們也提供了一個新的 npm 包 view-design,如果你是初次使用 View UI,也可以這樣安裝:

npm install view-design --save

或

npm install [email protected] --save

主要更新內容

本次的 4.0 版本有超過 50 項更新。

UI

UI 方面,主要是將原先的基礎字號由 12px 調整為了 14px。現在的電腦螢幕越來越大,解析度也越來越高,14px 的基礎字號會更加實用,而且也是大勢所趨。

對應的,很多元件的尺寸會稍微變大,比如所有的 Form 系列元件(Button、Select、Input 等等)的尺寸調整為了 40px(large)、32px(default)、24px(small)。

Button 的高度計算方式由原先的 padding 調整為了固定 height。

還有很多元件的 UI 也進行了微調,比如 Alert、Notice、Modal、Card 等等,整體更統一、規範。

下圖是兩個版本的尺寸對比:

新增列表元件 List

List 元件是最基礎的列表展示,可承載文字、列表、圖片、段落,常用於後臺資料展示頁面。

全域性配置

全域性配置中,新增 capture 選項,可以配置所有元件預設的 capture 模式,預設為 true。

capture 是瀏覽器的一種預設行為,如果開啟,當可下拉的元件(例如 Select)處於展開狀態時,點選外部操作不會立即響應,而是先收起下拉選單,再次點選才會響應操作。
如果不需要該特性,可以通過全域性配置,將 capture 設定為 false。

Table 表格

Table 表格元件是大家最關心的,4.0 我們提供了更多新的功能:

1.拖拽表頭調整列寬

列 column 新增加了屬性 resizable,設定為 true 時,滑鼠在表頭對應列的分割線上,就可以拖拽來調整列寬了:

2.合併行或列

新增了 span-method 屬性,可以自定義合併行或列,也就是可以合併單元格了,通過該屬性的配置,是可以對任意的行或列進行合併的:

3.表尾合計

新增了 show-summary 屬性,設定為 true 時,會在表尾顯示一個合計行,自動對該列數值求和。同時也新增了 summary-methodsum-text 來自定義合計的演算法或文案:

4.預設樣式不帶外側邊框

4.0 起 Table 表格元件的外輪廓預設不帶邊框了,更簡潔,除非設定 border 屬性。

這幾個功能給力吧,更給力的功能我們還會在 4.x 之後的幾個版本中更新哦!

Form 表單

1.新增屬性 disabled

如果想讓 Form 元件內的所有表單元件,例如 Button、Input、Select、Radio、Checkbox 等(View UI 的所有表單元件都支援)都禁用,以前的做法是要給每一個元件逐個加 disabled,很麻煩,現在只需要給外層的 Form 元件設定 disabled 屬性就可以了:

2.新增屬性 hide-required-mark

給表單 Form 設定了校驗規則中的 required,也就是必填,對應的 FormItem 的 label 前就會有一個紅色的星號 *。但是往往一個長表單,都顯示必填的 * 看起來是沒必要的,所以只需要給 Form 開啟 hide-required-mark 屬性,就不顯示必填的星號了。

3.新增屬性 label-colon

開啟該屬性,在 FormItem 的 label 名稱後會自動加冒號:,不用再一個個配置了。

4.新增事件 @on-validate

任一表單項被校驗後觸發,返回表單項 prop、校驗狀態、錯誤訊息。

Select 選擇器

1.新增屬性 allow-create 及事件 @on-create

在 filterable 模式下,開啟屬性 allow-create 可以通過在輸入框中輸入文字來建立新的條目。輸入新條目後,按下Enter鍵即可新建條目。

2.Option 元件新增屬性 tag

Option 元件新增屬性 tag,設定後,在多選時,標籤將優先顯示設定的內容。

多選,選中的標籤,預設顯示的就是 label,而在遠端搜尋的一些場景中,只有 label 會不夠用,所以新增了 tag 這一屬性。

Input 輸入框

1.新增屬性 show-word-limit

開啟屬性 show-word-limit 可以顯示字數統計,配合 maxlength 屬性來限制輸入長度:

2.新增屬性 password

在 type="password" 時,開啟屬性 password 可以切換顯示隱藏密碼:

Slider 滑塊

新增屬性 marks

設定屬性 marks 可以顯示標記。標記的 key 取值應該在閉合區間 [min, max] 內。標記點也可以通過 style 和 label 自定義樣式:

Switch 開關

1.開關背景顏色

新增屬性 true-colorfalse-color,可以自定義背景色:

2.阻止切換

新增屬性 before-change,如果設定,並返回 Promise,可以阻止切換,經常用於切換時請求資料,或二次確認的情況,可以配合 loading 來使用。

Progress 進度條

1.百分比內顯

新增屬性 text-inside,開啟後,可以將百分比顯示在進度條內部:

2.漸變色

屬性 stroke-color 設定為陣列時,可以顯示為漸變色了,該特性 Circle 進度環元件也支援:

Message 全域性提示

帶背景色

新增屬性 background, 開啟後,通知提示會顯示背景色:

Radio 單選 / Checkbox 多選

新增屬性 border,支援帶邊框的樣式:

Page 分頁

新增屬性 disabled,開啟後可以禁用分頁元件:

其它元件還有很多更新:

Badge 徽標數

  • 新增屬性 color,可以設定更多的狀態點顏色及自定義顏色。
  • 新增 slot count,設定時,可以自定義角標顯示內容(去角標背景),數值 count 將無效。
  • 新增 slot text,設定時,可以自定義角標顯示內容(帶角標背景),數值 count 將無效。亦可自定義狀態點模式下的 text 內容。

Tabs 標籤頁

  • 標籤頁過多時,在標籤頁位置可以使用滑鼠滾動。
  • 標籤頁過多時,左右箭頭距離增加。

AutoComplete 自動完成

  • placement 屬性支援全方向。
  • 修復點選元件外部關閉浮窗後,輸入框仍然聚焦的問題。
  • 修復 disabled 模式下,聚焦顯示外輪廓的問題。

Card 卡片

  • 新增屬性 totargetreplaceappend,支援跳轉連結。

Tag 標籤

  • 新增屬性 size,可以設定不同的尺寸,可選值為 large(大號)、medium(中號)、default(預設)

Avatar 頭像

  • 尺寸屬性 size 支援具體的數值。

Steps 步驟條

  • Step 元件新增具名 slot titlecontenticon
  • Steps 改用 flex 佈局,修復最後一列寬度不正確的問題。

其它修復:

  • 修復 Button、Menu 等帶有跳轉功能元件在 vue-router 3.1+ 版本跳轉報錯的問題。

不相容更新

  • DropdownItem 開啟 disabled 屬性後,Dropdown 不再觸發 @on-click 事件。
  • Table 預設樣式不再帶有外側邊框。

後記

這波更新很給力吧!

iView 已經有 3 年多的沉澱,今天更名為 View UI 也是一個全新的開始。我知道市面上對我們商業化有不同的看法,但 View UI 的初衷是永不變的,會永遠免費開源,也會永遠更新下去,給大家不斷帶來期望和驚喜。

但是為了更好的服務企業使用者,也為了我的公司得以生存,商業化的產品是在所難免的。如果 View UI 對你的公司或團隊節省了成本,提高了開發效率,或者想使用更豐富的高階元件、強大的整套中、後臺前端解決方案,歡迎購買我們的專業版產品 View UI ProAdmin Pro

最後附上專業版地址,可以線上體驗:

Admin Pro 介紹:https://pro.iviewui.com/admin-pro

Admin Pro 線上預覽:https://adminpro.iviewui.com

View UI Pro:https://pro.iviewui.com/pro

之後,我們還會通過公眾號分享更多的內容,歡迎關注: