使用前提:
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>
我这里只是全局引用了样式,模块没有全局引入模块,需要时再引入