寫在前面

金秋十月，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 iview@4。0。0 ——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-method和sum-text 來自定義合計的演算法或文案：

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

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

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

Form 表單

1.新增屬性 disabled

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

disabled

屬性就可以了：

disabled

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

2.新增屬性 hide-required-mark

屬性，就不顯示必填的星號了。

hide-required-mark

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

hide-required-mark

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

3.新增屬性 label-colon

label-colon

在 filterable 模式下，開啟屬性

4.新增事件 @on-validate

可以透過在輸入框中輸入文字來建立新的條目。輸入新條目後，按下回車鍵即可新建條目。

@on-validate

Option 元件新增屬性

Select 選擇器

，設定後，在多選時，標籤將優先顯示設定的內容。

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

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

allow-create

開啟屬性

@on-create

可以顯示字數統計，配合 maxlength 屬性來限制輸入長度：

allow-create

在 type=“password” 時，開啟屬性

2.Option 元件新增屬性 tag

可以切換顯示隱藏密碼：

tag

新增屬性

tag

設定屬性

Input 輸入框

可以顯示標記。標記的 key 取值應該在閉合區間 ［min， max］ 內。標記點也可以透過 style 和 label 自定義樣式：

1.新增屬性 show-word-limit

show-word-limit

新增屬性 true-color 和 false-color，可以自定義背景色：

show-word-limit

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

2.新增屬性 password

password

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

password

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

Slider 滑塊

marks

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

marks

新增屬性 border，支援帶邊框的樣式：

Switch 開關

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

其它元件還有很多更新：

1.開關背景顏色

新增屬性 color，可以設定更多的狀態點顏色及自定義顏色。

新增 slot count，設定時，可以自定義角標顯示內容（去角標背景），數值 count 將無效。

新增 slot text，設定時，可以自定義角標顯示內容（帶角標背景），數值 count 將無效。亦可自定義狀態點模式下的 text 內容。

2.阻止切換

標籤頁過多時，在標籤頁位置可以使用滑鼠滾動。

標籤頁過多時，左右箭頭距離增加。

Progress 進度條

placement 屬性支援全方向。

修復點選元件外部關閉浮窗後，輸入框仍然聚焦的問題。

修復 disabled 模式下，聚焦顯示外輪廓的問題。

1.百分比內顯

2.漸變色

新增屬性to、target、replace、append，支援跳轉連結。

Message 全域性提示

帶背景色

新增屬性 size，可以設定不同的尺寸，可選值為 large（大號）、medium（中號）、default（預設）。

Radio 單選 / Checkbox 多選

Page 分頁

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

Badge 徽標數

Step 元件新增具名 title、content和 icon。

Steps 改用 flex 佈局，修復最後一列寬度不正確的問題。

Tabs 標籤頁

AutoComplete 自動完成

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

Card 卡片

DropdownItem 開啟 disabled 屬性後，Dropdown 不再觸發 @on-click 事件。

Table 預設樣式不再帶有外側邊框。

這波更新很給力吧！

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

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

最後附上專業版地址，可以線上體驗：

Tag 標籤

https：//pro。iviewui。com/admin-pro

https：//adminpro。iviewui。com

Avatar 頭像

https：//pro。iviewui。com/pro