vue3 使用vant

使用前提:

 vite创建的vue3项目

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

 

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/17637.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Typora图床配置优化(PicGo-Core(command line) 插件 + gitee)

Typora图床配置优化&#xff08;PicGo-Core(command line) 插件 gitee&#xff09; 前言 在日常使用Typora编写markdown笔记时&#xff0c;经常需要插入图片来帮助理解和整理逻辑。然而&#xff0c;由于图片保存在本地&#xff0c;上传到网上时经常出现图片不见或错误警告的…

育菁桌面式数控机床助力教育装备

桌面式数控机床是一种小型化的数控机床&#xff0c;它通常具有紧凑的设计和较小的体积&#xff0c;可以放置在桌面上进行操作。 这种车床结合了数控技术&#xff0c;通过计算机编程来控制机床的运动和加工过程&#xff0c;以实现高精度、高效率的工件加工。 桌面式数控车床是一…

如何部署一套高可用性的医院信息管理系统?基于华为云、SpringBoot、Vue及Jenkins、Gitlab的CI/CD流程

目录 一、项目背景 二、项目架构 三、项目部署流程 1、前端部署 2、后端部署 3、监控与运维 四、项目过程 一、项目背景 随着医疗信息化程度的不断加深&#xff0c;医院信息管理系统的稳定性和可用性成为了医疗机构日常运营的关键。在这个数字化时代&am…

选择快充时代下的理想充电器与电压诱骗芯片PW6606

随着科技的不断进步&#xff0c;我们的电子设备对于充电速度和效率的要求越来越高。在快充技术迅猛发展的今天&#xff0c;了解不同类型的充电器及其对应的快充协议&#xff0c;以及如何选择适合的电压诱骗芯片&#xff0c;对于提升充电体验和保障设备安全显得尤为重要。 一、快…

生信网络学院|05月31日《SOLIDWORKS Manage 产品周期管理》

课程主题&#xff1a;SOLIDWORKS Manage 产品周期管理 课程时间&#xff1a;2024年05月31日 14:00-14:30 主讲人&#xff1a;付舰 生信科技 PLM实施顾问 1、SOLIDWORKS Manage介绍 2、周期流程管理 3、产品项目管理 4、项目会议管理 5、项目问题管理 安装腾讯会议客户端…

Android 13 VSYNC重学习

Android 13 VSYNC重学习 引言 学无止境&#xff0c;一个字干就完事&#xff01; 源码参考基于Android 13 aosp&#xff01; 一. Android VSync模块开胃菜 在开始正式的分析之前&#xff0c;我们先简单对Android的Vsync模块简单介绍下,如下图所示&#xff0c;其中: HW_VSync是…

【Java面试】一、Redis篇(上)

文章目录 0、准备1、缓存穿透&#xff1a;不存在的key2、缓存击穿&#xff1a;热点key过期3、缓存雪崩&#xff1a;大批key同时过期4、双写一致性4.1 要求高一致性4.2 允许一定的一致延迟 5、面试 0、准备 Redis相关概览&#xff1a; 以简历上所列的项目为切入点&#xff0c;展…

Steamdeck使用Windows系统游玩雪地奔驰时闪退问题解决方法

我非常喜欢雪地奔驰这款游戏&#xff0c;买sd的一部分也是为了它。可在我打开这个游戏时&#xff0c;游戏发生闪退问题。查阅了网络各个途径&#xff0c;基本没有解决方法。因此我自己分析终于解决该问题。以下是我解决问题的思路&#xff0c;仅供记录参考&#xff1a; 游戏在崩…

2024提升数字思维能力加快企业数字化转型(74页PPT)

方案介绍&#xff1a; 本报告的价值在于为企业提供了一套系统的提升数字思维能力、加快数字化转型的理论框架和实践指南。通过本报告的学习和应用&#xff0c;企业可以更加清晰地认识到数字化转型的重要性和紧迫性&#xff0c;明确自身在数字化转型中的优势和不足&#xff0c;并…

ES升级--02--kibana安装与启动

提示&#xff1a;文章写完后&#xff0c;目录可以自动生成&#xff0c;如何生成可参考右边的帮助文档 文章目录 Kibana官网文档https://www.elastic.co/guide/cn/kibana/current/targz.html 1.官网下载https://www.elastic.co/cn/downloads/past-releases#kibana 2.解压软件3.配…

基于VMware安装Linux虚拟机

1.准备Linux环境 首先&#xff0c;我们要准备一个Linux的系统&#xff0c;成本最低的方式就是在本地安装一台虚拟机。为了统一学习环境&#xff0c;不管是使用MacOS还是Windows系统的同学&#xff0c;都建议安装一台虚拟机。 windows采用VMware&#xff0c;Mac则采用Fusion …

使用Spring Boot编写的小项目

加法计算器 前端代码 <!DOCTYPE html> <html lang"en"> <head><meta charset"UTF-8"><meta name"viewport" content"widthdevice-width, initial-scale1.0"><title>Document</title> <…

若依跳转(新增)页面,在菜单中不显示的页面

在router.js文件中 跳转方式 this.$router.push(/monitor/b/b)

有限元之有限元法的实现

目录 一、单元刚度矩阵及单元荷载 二、总刚度矩阵及总荷载的合成 三、边界条件处理 四、算例实现 4.1 C代码 4.2 计算结果 五、结论 前三节我们介绍了有限元的基本概念、变分理论及有限元空间的构造&#xff0c;本节我们探讨如何实现有限元法。我们继续以二维椭圆型方程…

以太坊现货ETF获批:引发ETH价格暴涨,市场热议达到高潮

2024年5月24日&#xff0c;北京时间&#xff0c;以太坊现货ETF正式获得美国证券交易委员会&#xff08;SEC&#xff09;的批准&#xff0c;成为继比特币之后&#xff0c;美国主权政府承认的又一加密货币基金产品。这一意外的利好消息引发了加密货币市场的狂欢&#xff0c;以太坊…

JavaWeb开发 2.Web开发 Web前端开发 ①介绍

内心一旦平静&#xff0c;外界便鸦雀无声 —— 24.5.27 一、初识Web前端 网页有哪些部分组成? 文字、图片、音频、视频、超链接 ...网页&#xff0c;背后的本质是什么? 前端代码前端的代码是如何转换成用户眼中的网页的? 通过浏览器转化(解析和渲染)成用户看…

调试面对面翻译小程序

调试面对面翻译小程序 文章目录 调试面对面翻译小程序预览1.拉取项目2.在微信开发者工具打开使用 微信版本要求微信同声传译插件支持功能 此demo用于学习 预览 1.拉取项目 git clone https://github.com/Tencent/Face2FaceTranslator或者&#xff08;加速镜像&#xff09; git …

Warning: Each child in a list should have a unique “key“ prop.

问题描述&#xff1a; 使用ProTable的时候&#xff0c;报错如下 原因分析&#xff1a; 根据报错内容可以分析出&#xff0c;表格数据缺少唯一key&#xff0c; <PaginationTablecolumns{columns}pagination{{pageSize: 10,current: 1,showSizeChanger: true,showQuickJum…

网络安全行为可控定义以及表现内容简述

在数字化快速发展的今天&#xff0c;网络安全已成为国家和企业不可或缺的防线。据统计&#xff0c;网络攻击事件频发&#xff0c;给全球经济带来了巨大损失。因此&#xff0c;确保网络安全行为可控显得尤为重要。今天我们来聊聊网络安全行为可控定义以及表现内容。 网络安全行为…

摸鱼大数据——Hive表操作——分区表

1、介绍 特点: 分区表会在HDFS上产生目录。查询数据的时候使用分区字段筛选数据&#xff0c;可以避免全表扫描&#xff0c;从而提升查询效率 注意: 如果是分区表&#xff0c;在查询数据的时候&#xff0c;如果没有使用分区字段&#xff0c;它回去进行全表扫描&#xff0c;会降低…