使用前提：

 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>

 

我这里只是全局引用了样式，模块没有全局引入模块，需要时再引入