升级 Vant 4 后如何用 vant/compat 保持 Dialog 与 Toast 的 Vant 3 调用方式【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vant把基于 Vant 3 的项目升级到 Vant 4 后Dialog()、Toast()这类函数式调用不再可用Vant 4 将Dialog()重命名为showDialog()、将Toast()重命名为showToast()并且Dialog与Toast直接指向组件对象。如果项目里这类调用点很多、无法一次替换完可以安装兼容包vant/compat只修改引用路径就能让 Vant 3 风格的 Dialog 与 Toast 调用代码原样运行。Vant 4 中 Dialog 与 Toast 的调用方式发生了什么变化Vant 3 中Dialog是一个函数调用函数可以快速唤起全局的弹窗组件Dialog.Component才是组件对象Toast同理。Vant 4 为了更符合直觉调整了这两者的调用方式// Vant 3 Dialog(); // 函数调用 Dialog.Component; // 组件对象 Toast(); // 函数调用 // Vant 4 showDialog(); // 函数调用 Dialog; // 组件对象 showToast(); // 函数调用 Toast; // 组件对象Dialog与Toast上挂载的其他方法也进行了重命名例如Dialog.close()变为closeDialog()、Toast.clear()变为closeToast()。另外Vant 4 将不再在this对象上全局注册$toast方法this.$toast也无法再访问到。安装 Vant 4 与 vant/compatvant/compat是一个兼容包帮助你从 Vant 3 过渡到 Vant 4。先确认项目已升级到 Vant 4再安装兼容包# 通过 npm 安装 npm add vant^4 vant/compat^1 # 通过 yarn 安装 yarn add vant^4 vant/compat^1 # 通过 pnpm 安装 pnpm add vant^4 vant/compat^1 # 通过 Bun 安装 bun add vant^4 vant/compat^1也可以直接修改package.json的dependencies字段中的版本号修改完成后重新安装依赖{ dependencies: { - vant: ^3.0.0, vant: ^4.0.0, vant/compat: ^1.0.0, } }升级 Vant 4 还有一个必须处理的前置改动从 Vant 4.0 开始不再支持babel-plugin-import需要从babel.config.js中移除该插件。完整的升级步骤样式引入方式、Picker/Area/DatetimePicker 组件重构等不在本文范围内参见 从 v3 升级到 v4 指南。把 Dialog 与 Toast 的引用切换到 vant/compat兼容的核心操作只有一处把原来从vant引入Dialog/Toast的代码改为从vant/compat引入其余调用代码保持不变。vant/compat的用法见 packages/vant-compat/README.mdimport { Dialog } from vant/compat; Dialog(); Dialog.close();import { Toast } from vant/compat; Toast(); Toast.clear();vant/compat中导出的Dialog与 Vant 3 中的Dialog拥有完全一致的 API 和行为Toast同理。也就是说Dialog.alert()、Dialog.confirm()、Toast.fail()、Toast.success()、Toast.loading()等 Vant 3 写法都可以继续使用不需要调整参数。恢复 this.$toast 与 this.$dialog可选如果旧代码里使用了this.$toast/this.$dialog而 Vant 4 默认不再注册这些全局方法可以利用vant/compat导出的Toast与Dialog自带的install方法通过app.use把它们挂回app.config.globalProperties。参考 toast.ts 与 dialog.ts 的实现import { Toast, Dialog } from vant/compat; app.use(Toast); // this.$toast 恢复可用 app.use(Dialog); // this.$dialog 恢复可用验证现有 Vant 3 调用代码行为不变文档给出的结论是只需要修改引用路径其他代码可以保持不变。可以按以下方式核对确认所有原本import { Dialog } from vant/import { Toast } from vant的调用点已改为从vant/compat引入。运行项目并触发原有调用点调用Dialog()、Toast()等表现应与 Vant 3 中完全一致兼容对象与 Vant 3 的 API 和行为完全一致是文档给出的判断依据。如果某个调用点不生效先检查它的引用路径——Vant 4 中从vant导入的Dialog/Toast是组件对象不再是 Vant 3 中的函数。后续逐步替换为新 API 并移除 vant/compatvant/compat是过渡工具。文档建议在项目完成升级到 Vant v4 后在迭代中逐步替换为新的showDialog、showToast等方法并移除vant/compat包。替换时对照下表Dialog 新旧 API 映射Vant 3Vant 4Dialog()showDialog()Dialog.alert()showDialog()Dialog.confirm()showConfirmDialog()Dialog.close()closeDialog()Dialog.setDefaultOptions()setDialogDefaultOptions()Dialog.resetDefaultOptions()resetDialogDefaultOptions()Toast 新旧 API 映射Vant 3Vant 4Toast()showToast()Toast.fail()showFailToast()Toast.success()showSuccessToast()Toast.loading()showLoadingToast()Toast.clear()closeToast()Toast.setDefaultOptions()setToastDefaultOptions()Toast.resetDefaultOptions()resetToastDefaultOptions()全部替换后可以直接从 Vant 4 主包导入这些方法import { showToast, showDialog } from vant;另外vant/compat还以同样的方式导出了Notify与ImagePreview见 packages/vant-compat/src/index.ts如果项目里也用到这两个对象的旧式调用处理方式相同从vant/compat引入保持原有调用代码不变。【免费下载链接】vantA lightweight, customizable Vue UI library for mobile web apps.项目地址: https://gitcode.com/GitHub_Trending/va/vant创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考