視圖更新科技發佈 View UI 組件庫（即 iView 4.0），超過50項更新

寫在前面

金秋十月，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 版本的核心是功能加強和體驗優化，基本沒有不兼容的，你們能夠放心升級，主要的更新內容下文會逐一介紹。

更新方法查看文檔:

升級 4.x 指南：https://www.iviewui.com/docs/update4

主要更新內容

本次的 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 等等，總體更統1、規範。

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

新增列表組件 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 屬性就能夠了：

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 能夠經過在輸入框中輸入文字來建立新的條目。輸入新條目後，按下回車鍵便可新建條目。

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-color 和 false-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 卡片

• 新增屬性 to、target、replace、append，支持跳轉連接。

Tag 標籤

• 新增屬性 size，能夠設置不一樣的尺寸，可選值爲 large（大號）、medium（中號）、default（默認）

Avatar 頭像

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

Steps 步驟條

• Step 組件新增具名 slot title、content 和 icon。
• Steps 改用 flex 佈局，修復最後一列寬度不正確的問題。

其它修復：

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

不兼容更新

• DropdownItem 開啓 disabled 屬性後，Dropdown 再也不觸發 @on-click 事件。
• Table 默認樣式再也不帶有外側邊框。

後記

這波更新很給力吧！

iView 已經有 3 年多的沉澱，今天改名爲 View UI 也是一個全新的開始。我知道市面上對咱們商業化有不一樣的見解，但 View UI 的初衷是永不變的，會永遠免費開源，也會永遠更新下去，給你們不斷帶來指望和驚喜。

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

最後附上專業版地址，能夠在線體驗：

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

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

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

以後，咱們還會經過公衆號分享更多的內容，歡迎關注：