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)
}

效果如下