Vant 4.0 上周發(fā)布了正式版。發(fā)布公告寫道，這是 Vant 自 2017 年開源以來發(fā)布的第四個重要版本。

在本次迭代中，Vant 支持了深色模式，增加五個新組件，改善工具函數 API 并重構 Picker 等組件，同時繼續(xù)在輕量化和易用性方面做出改進。

支持深色模式

Vant 4.0 支持切換所有組件為深色模式。

只需要把ConfigProvider 組件的theme屬性設置為dark，即可切換為深色模式，將頁面上的所有 Vant 組件變成深色風格。

<van-config-providertheme="dark">
  
van-config-provider>

幾個新組件

• BackTop 回到頂部：返回頁面頂部的操作按鈕。

• TimePicker 時間選擇器：用于時間選擇，包括時、分、秒。

• DatePicker 日期選擇器：用于日期選擇，包括年、月、日。

• PickerGroup 選擇器組：用于結合多個 Picker 選擇器組件，在一次交互中完成多個值的選擇。

• Skeleton 骨架屏子組件：通過 SkeletonTitle、SkeletonImage、SkeletonAvatar 等子組件來自定義骨架屏。

保持輕量

統(tǒng)一主色調

:root {
  --van-primary-color: #07c160;
}

按需引入方式調整

• 不再強依賴 Babel 編譯，項目可以使用 SWC、esbuild 等現(xiàn)代編譯工具，進而提升編譯效率。

• 不再受到babel-plugin-import的 import 限制，可以從 Vant 中導入除組件以外的內容，比如 Vant 4 中新增的showToast方法，或是buttonProps對象：

import { showToast, buttonProps } from 'vant';

樣式變量類型提示

Picker 組件重構

• Picker 的 columns 數據格式不合理，容易產生誤解。

• Picker 的數據流不清晰，暴露了過多的實例方法來對數據進行操作。

• DatetimePicker 的邏輯過于復雜，經常在邊界場景下出現(xiàn) bug。

組件工具函數調整

// 函數調用
Dialog({ message: 'Hello World!' });

// 組件注冊
app.use('van-dialog', Dialog.Component);

// 函數調用
showDialog({ message: 'Hello World!' });

// 組件注冊
app.use('van-dialog', Dialog);

import { Dialog } from '@vant/compat';

Dialog({ message: 'Hello World!' });

事件命名調整

// Vant 3
emit('click-input');

// Vant 4
emit('clickInput');

這項改動不影響原有的模板代碼，Vue 會自動在模板中對事件名進行格式轉換，因此你無須做任何更改。

<van-field@click-input="onClick"/>

// Vant 3
<Field onClick-input={onClick} />

// Vant 4
<Field onClickInput={onClick} />

移除 Less 變量

Vant Cli 5.0

• 升級 Vite 到 3.0 版本，并對相關的 Vite 插件進行升級。

• 不再默認安裝stylelint和@vant/stylelint-config依賴，需要的話可以自行安裝：

npm add stylelint@13 @vant/stylelint-config

• 不再默認安裝gh-pages依賴，請按照如下方式更新 package.json：

- "release:site": "pnpm build:site && gh-pages -d site-dist",
+ "release:site": "pnpm build:site && npx gh-pages -d site-dist",

版本信息