Vant 4.0正式发布，基于Vue 3的移动组件库

Vant 4.0 上周发布了正式版。发布公告写道，这是 Vant 自 2017 年开源以来发布的第四个重要版本。

在本次迭代中，Vant 支持了深色模式，增加五个新组件，改善工具函数 API 并重构 Picker 等组件，同时继续在轻量化和易用性方面做出改进。

支持深色模式

Vant 4.0 支持切换所有组件为深色模式。

只需要把ConfigProvider 组件的theme属性设置为dark，即可切换为深色模式，将页面上的所有 Vant 组件变成深色风格。

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

几个新组件

• BackTop 回到顶部：返回页面顶部的操作按钮。

• TimePicker 时间选择器：用于时间选择，包括时、分、秒。

• DatePicker 日期选择器：用于日期选择，包括年、月、日。

• PickerGroup 选择器组：用于结合多个 Picker 选择器组件，在一次交互中完成多个值的选择。

• Skeleton 骨架屏子组件：通过 SkeletonTitle、SkeletonImage、SkeletonAvatar 等子组件来自定义骨架屏。

保持轻量

统一主色调

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

按需引入方式调整

• 不再强依赖 Babel 编译，项目可以使用 SWC、esbuild 等现代编译工具，进而提升编译效率。

• 不再受到babel-plugin-import的 import 限制，可以从 Vant 中导入除组件以外的内容，比如 Vant 4 中新增的showToast方法，或是buttonProps对象：

import { showToast, buttonProps } from 'vant';

样式变量类型提示

Picker 组件重构

• Picker 的 columns 数据格式不合理，容易产生误解。

• Picker 的数据流不清晰，暴露了过多的实例方法来对数据进行操作。

• DatetimePicker 的逻辑过于复杂，经常在边界场景下出现 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",

版本信息