Vue3 vant4 解决引入的Toast和dialog样式丢失的bug
情景再现：
正确做法：
import 'vant/es/toast/style'
import 'vant/es/dialog/style'
import 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: App<Element>) { // 挂载到全局属性 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) }