寫在前面

金秋十月，iView 4.0 如約而至。但是標(biāo)題信息量有點(diǎn)大，所以先來解讀一下標(biāo)題。

iView 作者 Aresn 于 2019 年創(chuàng)辦了北京視圖更新科技有限公司，開始自由、全職地維護(hù) iView 及其相關(guān)的軟件。View UI 即為原先的 iView，從 2019 年 10 月起正式更名為 View UI，并使用全新的 Logo。iView 作者將在新倉庫 github.com/view-design… 繼續(xù)開發(fā) iView 4.0 和后續(xù)版本，以及維護(hù)工作。原倉庫 iView 作者不再繼續(xù)提交內(nèi)容。

簡單說就是，我們將 GitHub 遷移到了：

github.com/view-design…

對于絕大部分用戶來說，使用沒有任何影響，之后的 issue 和 pr 也請大家到新的倉庫進(jìn)行提交，當(dāng)然包括 Star！

請相信，全新的 View UI 組件庫會帶來更強(qiáng)大的功能和更出色的體驗(yàn)。由于現(xiàn)在已經(jīng)全職維護(hù)，這里也可以向大家保證，每 1~2 周迭代一個(gè)版本。

更新方法

4.0 版本的核心是功能增強(qiáng)和體驗(yàn)優(yōu)化，基本沒有不兼容的，大家可以放心升級，主要的更新內(nèi)容下文會逐一介紹。

更新方法查看文檔:

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

主要更新內(nèi)容

本次的 4.0 版本有超過 50 項(xiàng)更新。

UI

UI 方面，主要是將原先的基礎(chǔ)字號由 12px 調(diào)整為了 14px?，F(xiàn)在的電腦屏幕越來越大，分辨率也越來越高，14px 的基礎(chǔ)字號會更加實(shí)用，而且也是大勢所趨。

對應(yīng)的，很多組件的尺寸會稍微變大，比如所有的 Form 系列組件（Button、Select、Input 等等）的尺寸調(diào)整為了 40px（large）、32px（default）、24px（small）。

Button 的高度計(jì)算方式由原先的 padding 調(diào)整為了固定 height。

還有很多組件的 UI 也進(jìn)行了微調(diào)，比如 Alert、Notice、Modal、Card 等等，整體更統(tǒng)一、規(guī)范。

下圖是兩個(gè)版本的尺寸對比：

新增列表組件 List

List 組件是最基礎(chǔ)的列表展示，可承載文字、列表、圖片、段落，常用于后臺數(shù)據(jù)展示頁面。

全局配置

全局配置中，新增 capture 選項(xiàng)，可以配置所有組件默認(rèn)的 capture 模式，默認(rèn)為 true。

capture 是瀏覽器的一種默認(rèn)行為，如果開啟，當(dāng)可下拉的組件（例如 Select）處于展開狀態(tài)時(shí)，點(diǎn)擊外部操作不會立即響應(yīng)，而是先收起下拉菜單，再次點(diǎn)擊才會響應(yīng)操作。 如果不需要該特性，可以通過全局配置，將 capture 設(shè)置為 false。

Table 表格

Table 表格組件是大家最關(guān)心的，4.0 我們提供了更多新的功能：

1.拖拽表頭調(diào)整列寬

列 column 新增加了屬性 resizable，設(shè)置為 true 時(shí)，鼠標(biāo)在表頭對應(yīng)列的分割線上，就可以拖拽來調(diào)整列寬了：

2.合并行或列

新增了 span-method 屬性，可以自定義合并行或列，也就是可以合并單元格了，通過該屬性的配置，是可以對任意的行或列進(jìn)行合并的：

3.表尾合計(jì)

新增了 show-summary 屬性，設(shè)置為 true 時(shí)，會在表尾顯示一個(gè)合計(jì)行，自動對該列數(shù)值求和。同時(shí)也新增了 summary-method 和 sum-text 來自定義合計(jì)的算法或文案：

4.默認(rèn)樣式不帶外側(cè)邊框

4.0 起 Table 表格組件的外輪廓默認(rèn)不帶邊框了，更簡潔，除非設(shè)置 border 屬性。

這幾個(gè)功能給力吧，更給力的功能我們還會在 4.x 之后的幾個(gè)版本中更新哦！

Form 表單

1.新增屬性 disabled

如果想讓 Form 組件內(nèi)的所有表單組件，例如 Button、Input、Select、Radio、Checkbox 等（View UI 的所有表單組件都支持）都禁用，以前的做法是要給每一個(gè)組件逐個(gè)加 disabled，很麻煩，現(xiàn)在只需要給外層的 Form 組件設(shè)置 disabled 屬性就可以了：

2.新增屬性 hide-required-mark

給表單 Form 設(shè)置了校驗(yàn)規(guī)則中的 required，也就是必填，對應(yīng)的 FormItem 的 label 前就會有一個(gè)紅色的星號 *。但是往往一個(gè)長表單，都顯示必填的 * 看起來是沒必要的，所以只需要給 Form 開啟 hide-required-mark 屬性，就不顯示必填的星號了。

3.新增屬性 label-colon

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

4.新增事件 @on-validate

任一表單項(xiàng)被校驗(yàn)后觸發(fā)，返回表單項(xiàng) prop、校驗(yàn)狀態(tài)、錯(cuò)誤消息。

Select 選擇器

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

在 filterable 模式下，開啟屬性 allow-create 可以通過在輸入框中輸入文字來創(chuàng)建新的條目。輸入新條目后，按下回車鍵即可新建條目。

2.Option 組件新增屬性 tag

Option 組件新增屬性 tag，設(shè)置后，在多選時(shí)，標(biāo)簽將優(yōu)先顯示設(shè)置的內(nèi)容。

多選，選中的標(biāo)簽，默認(rèn)顯示的就是 label，而在遠(yuǎn)程搜索的一些場景中，只有 label 會不夠用，所以新增了 tag 這一屬性。

Input 輸入框

1.新增屬性 show-word-limit

開啟屬性 show-word-limit 可以顯示字?jǐn)?shù)統(tǒng)計(jì)，配合 maxlength 屬性來限制輸入長度：

2.新增屬性 password

在 type="password" 時(shí)，開啟屬性 password 可以切換顯示隱藏密碼：

Slider 滑塊

新增屬性 marks

設(shè)置屬性 marks 可以顯示標(biāo)記。標(biāo)記的 key 取值應(yīng)該在閉合區(qū)間 [min, max] 內(nèi)。標(biāo)記點(diǎn)也可以通過 style 和 label 自定義樣式：

Switch 開關(guān)

1.開關(guān)背景顏色

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

2.阻止切換

新增屬性 before-change，如果設(shè)置，并返回 Promise，可以阻止切換，經(jīng)常用于切換時(shí)請求數(shù)據(jù)，或二次確認(rèn)的情況，可以配合 loading 來使用。

Progress 進(jìn)度條

1.百分比內(nèi)顯

新增屬性 text-inside，開啟后，可以將百分比顯示在進(jìn)度條內(nèi)部：

2.漸變色

屬性 stroke-color 設(shè)置為數(shù)組時(shí)，可以顯示為漸變色了，該特性 Circle 進(jìn)度環(huán)組件也支持：

Message 全局提示

帶背景色

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

Radio 單選 / Checkbox 多選

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

Page 分頁

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

其它組件還有很多更新：

Badge 徽標(biāo)數(shù)

• 新增屬性 color，可以設(shè)置更多的狀態(tài)點(diǎn)顏色及自定義顏色。
• 新增 slot count，設(shè)置時(shí)，可以自定義角標(biāo)顯示內(nèi)容（去角標(biāo)背景），數(shù)值 count 將無效。
• 新增 slot text，設(shè)置時(shí)，可以自定義角標(biāo)顯示內(nèi)容（帶角標(biāo)背景），數(shù)值 count 將無效。亦可自定義狀態(tài)點(diǎn)模式下的 text 內(nèi)容。

Tabs 標(biāo)簽頁

• 標(biāo)簽頁過多時(shí)，在標(biāo)簽頁位置可以使用鼠標(biāo)滾動。
• 標(biāo)簽頁過多時(shí)，左右箭頭距離增加。

AutoComplete 自動完成

• placement 屬性支持全方向。
• 修復(fù)點(diǎn)擊組件外部關(guān)閉浮窗后，輸入框仍然聚焦的問題。
• 修復(fù) disabled 模式下，聚焦顯示外輪廓的問題。

Card 卡片

• 新增屬性 to、target、replace、append，支持跳轉(zhuǎn)鏈接。

Tag 標(biāo)簽

• 新增屬性 size，可以設(shè)置不同的尺寸，可選值為 large（大號）、medium（中號）、default（默認(rèn)）

Avatar 頭像

• 尺寸屬性 size 支持具體的數(shù)值。

Steps 步驟條

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

其它修復(fù)：

• 修復(fù) Button、Menu 等帶有跳轉(zhuǎn)功能組件在 vue-router 3.1+ 版本跳轉(zhuǎn)報(bào)錯(cuò)的問題。

不兼容更新

• DropdownItem 開啟 disabled 屬性后，Dropdown 不再觸發(fā) @on-click 事件。
• Table 默認(rèn)樣式不再帶有外側(cè)邊框。