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

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

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

支持深色模式

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

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

<van-config-providertheme="dark">
  <!-- child components -->
</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",

版本信息

你参与开源吗？

点击下方小程序

抽开源中国周边啦~

END

开源白嫖不提倡？

---

这里有最新开源资讯、软件更新、技术干货等内容

点这里 ↓↓↓ 记得 关注✔ 标星⭐ 哦~