使用前提：

?vite創建的vue3項目

?vanthttps://vant-ui.github.io/vant/#/zh-CN/home

npm i vant

引入樣式：

main.js import 'vant/lib/index.css'

vant封裝?

import { showLoadingToast,closeToast,showDialog,showConfirmDialog } from 'vant';export function dialog(title,msg,success){showDialog({title: title||'溫馨提示',message: msg,}).then(() => {// on closeif(success){return success()}});
}export  const loading ={showLoading:function (msg){showLoadingToast({message: msg||'加載中...',duration: 0, // 持續展示 toast})},hideLoading:function(){closeToast();}}export function confirmDialog(title,msg,success,error){return new Promise((resolve, reject) => {showConfirmDialog({title: title||'溫馨提示',message:msg,}).then(() => {resolve(true)if(success){return success()}}).catch(() => {resolve(false)if(error){return error()}});})}

使用

import { loading } from "@/utils/vant";loading.showLoading();//loading.hideLoading()

<script setup>import { Empty} from "vant"</script><template><div><Empty description="讀取用戶信息中,請稍后..."></Empty></div>
</template>

?

我這里只是全局引用了樣式，模塊沒有全局引入模塊，需要時再引入