vue3 使用vant

news/2024/9/25 5:31:49/

使用前提:

 vite创建的vue3项目

 vanticon-default.png?t=N7T8https://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 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()}});})}

使用

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>

 

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


http://www.ppmy.cn/news/1464518.html

相关文章

hive中的join操作及其数据倾斜

hive中的join操作及其数据倾斜 join操作是一个大数据领域一个常见的话题。归根结底是由于在数据量超大的情况下&#xff0c;join操作会使内存占用飙升。运算的复杂度也随之上升。在进行join操作时&#xff0c;也会更容易发生数据倾斜。这些都是需要考虑的问题。 过去了解到很…

CSS浮动详细教学(CSS从入门到精通学习第四天)

css第04天 一、其他样式 1、圆角边框 在 CSS3 中&#xff0c;新增了圆角边框样式&#xff0c;这样我们的盒子就可以变圆角了。 border-radius 属性用于设置元素的外边框圆角。 语法&#xff1a; border-radius:length; 参数值可以为数值或百分比的形式如果是正方形&…

Docker安装nginx详细教程

详细教程如下&#xff1a; 1. 拉取Nginx镜像 docker pull nginx默认拉最新的&#xff08;也可以根据自己的需求指定版本&#xff09; 2. 运行Nginx容器 docker run --name my-nginx -d -p 80:80 nginx--name my-nginx&#xff1a;容器名称&#xff0c;便于管理。-d&#xf…

【OrangePi AIpro】开箱初体验以及OAK深度相机测试

1. 简介 Orangepi AIPRO 是一款采用昇腾AI技术路线&#xff0c;集成4核64位处理器AI处理器的单板计算机&#xff0c;集成图形处理器&#xff0c;支持8TOPS AI算力&#xff0c;拥有8GB/16GB LPDDR4X&#xff0c;可以外接eMMC模块&#xff0c;支持双4K高清输出。 Orange Pi AIpr…

【网络安全】社会工程学攻击与防范

一、社会工程学概述 1、社会工程学的定义 通过利用人们的心理弱点、本能反应、好奇心、信任、贪婪等一些心理陷阱进行的诸如欺骗、伤害、信息盗取、利益谋取等对社会及人类带来危害的行为或方法。 当网络恶意攻击者无法通过纯粹的计算机技术达到目的时&#xff0c;高超的情商…

SpringBoot + MybatisPlus

SpringBoot MybatisPlus 整合记录 1. 硬件软件基本信息2. 相关链接3. 通过idea快速生成一个Springboot项目4. 启动报错问题解决问题一&#xff1a;Springboot启动的时候报错提示 “没有符合条件的Bean关于Mapper类型”问题二&#xff1a;启动的时候提示需要一个Bean&#xff0…

【游戏引擎】Unity动画系统详解

持续更新。。。。。。。。。。。。。。。 【游戏引擎】Unity动画系统详解 Unity动画系统详解简介关键帧动画创建关键帧动画的步骤&#xff1a; Mecanim动画系统Mecanim的关键组件&#xff1a;使用Mecanim创建动画的步骤&#xff1a; 动画控制器动画控制器的高级功能&#xff1a…

Linux系统编程(五)多线程

目录 一、基本知识点二、线程的编译三、 线程相关函数1. 线程的创建2. 线程的退出3. 线程的等待补充 四、综合举例 一、基本知识点 定义    线程&#xff08;Thread&#xff09;是操作系统能够进行运算调度的最小单位。它被包含在进程之中&#xff0c;是进程中的实际运作单位…