vue3 使用vant

使用前提:

vite创建的vue3项目

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

npm i vant

引入样式:

javascript 复制代码
main.js 

import 'vant/lib/index.css'

vant封装

javascript 复制代码
import { showLoadingToast,closeToast,showDialog,showConfirmDialog } from 'vant';


export function dialog(title,msg,success){
  showDialog({
    title: title||'温馨提示',
    message: msg,
  }).then(() => {
    // on close
    if(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()
      }
    });
 })



}

使用

javascript 复制代码
import { loading } from "@/utils/vant";

loading.showLoading();

//loading.hideLoading()
javascript 复制代码
<script setup>

import { Empty} from "vant"

</script>

<template>
  <div>
   <Empty description="读取用户信息中,请稍后..."></Empty>
  </div>
</template>

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

相关推荐
just小千2 分钟前
重学React(二):添加交互
javascript·react.js·交互
烛阴7 分钟前
一文搞懂 Python 闭包:让你的代码瞬间“高级”起来!
前端·python
AA-代码批发V哥11 分钟前
HTML之表单结构全解析
前端·html
qq_5895681020 分钟前
element-plus按需自动导入的配置 以及icon图标不显示的问题解决
开发语言·javascript·ecmascript
聪聪的学习笔记22 分钟前
【1】确认安装 Node.js 和 npm版本号
前端·npm·node.js
小磊哥er34 分钟前
【前端工程化】你知道前端编码规范包含哪些内容吗
前端
菌菇汤1 小时前
uni-app实现单选,多选也能搜索,勾选,选择,回显
前端·javascript·vue.js·微信小程序·uni-app·app
Ramos丶1 小时前
【ABAP】 从无到有 新建一个Webdynpro程序
java·前端·javascript
摸鱼仙人~1 小时前
如何创建基于 TypeScript 的 React 项目
javascript·react.js·typescript
qq_411671981 小时前
vue3 的模板引用ref和$parent
前端·javascript·vue.js