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

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

支持深色模式

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

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

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

幾個(gè)新組件

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

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

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

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

• Skeleton 骨架屏子組件：通過(guò) SkeletonTitle、SkeletonImage、SkeletonAvatar 等子組件來(lái)自定義骨架屏。

保持輕量

統(tǒng)一主色調(diào)

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

按需引入方式調(diào)整

• 不再?gòu)?qiáng)依賴 Babel 編譯，項(xiàng)目可以使用 SWC、esbuild 等現(xiàn)代編譯工具，進(jìn)而提升編譯效率。

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

import { showToast, buttonProps } from 'vant';

樣式變量類型提示

Picker 組件重構(gòu)

• Picker 的 columns 數(shù)據(jù)格式不合理，容易產(chǎn)生誤解。

• Picker 的數(shù)據(jù)流不清晰，暴露了過(guò)多的實(shí)例方法來(lái)對(duì)數(shù)據(jù)進(jìn)行操作。

• DatetimePicker 的邏輯過(guò)于復(fù)雜，經(jīng)常在邊界場(chǎng)景下出現(xiàn) bug。

組件工具函數(shù)調(diào)整

// 函數(shù)調(diào)用
Dialog({ message: 'Hello World!' });

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

// 函數(shù)調(diào)用
showDialog({ message: 'Hello World!' });

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

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

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

事件命名調(diào)整

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

// Vant 4
emit('clickInput');

這項(xiàng)改動(dòng)不影響原有的模板代碼，Vue 會(huì)自動(dòng)在模板中對(duì)事件名進(jìn)行格式轉(zhuǎn)換，因此你無(wú)須做任何更改。

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

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

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

移除 Less 變量

Vant Cli 5.0

• 升級(jí) Vite 到 3.0 版本，并對(duì)相關(guān)的 Vite 插件進(jìn)行升級(jí)。

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

npm add stylelint@13 @vant/stylelint-config

• 不再默認(rèn)安裝gh-pages依賴，請(qǐng)按照如下方式更新 package.json：

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

版本信息