Vue3 vant4 解决引入的Toast和dialog样式丢失的bug

情景再现正确做法import vant/es/toast/styleimport vant/es/dialog/styleimport type { App } from vue import { showToast, type ToastOptions, closeToast, showDialog, type DialogOptions } from vant import vant/es/toast/style import vant/es/dialog/style // 全局消息提示 export const $toast { text: ( content: string, options: ToastOptions { duration: 2000 } ) showToast({ message: content, ...options }), loading: ( content: string, options: ToastOptions { duration: 2000 } ) showToast({ message: content, type: loading, ...options }), success: ( content: string, options: ToastOptions { duration: 2000 } ) showToast({ message: content, type: success, ...options }), error: ( content: string, options: ToastOptions { duration: 2000 } ) showToast({ message: content, type: fail, ...options }), closeAll: () { closeToast() } } // 全局确认框 export const $confirm (content: string, options?: DialogOptions) { return showDialog({ title: options?.title || 提示, message: content, confirmButtonText: options?.confirmButtonText || 确定, cancelButtonText: options?.cancelButtonText || 取消, ...options }) } // Vant 安装函数 export default function setupVant(app: AppElement) { // 挂载到全局属性 app.config.globalProperties.$toast $toast app.config.globalProperties.$confirm $confirm // 挂载到 window 对象供其他模块使用 if (typeof window ! undefined) { ;(window as any).$toast $toast ;(window as any).$confirm $confirm } // 提供给组合式 API 使用 app.provide($toast, $toast) app.provide($confirm, $confirm) }效果如下