vue3 使用vant

ops/2024/9/25 8:53:14/

使用前提:

 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/ops/44756.html

相关文章

day22二叉树part08 | 235. 二叉搜索树的最近公共祖先 701.二叉搜索树中的插入操作 450.删除二叉搜索树中的节点

**235. 二叉搜索树的最近公共祖先 ** 这里利用上了二叉搜索树的特性&#xff0c;从上到下遍历&#xff0c;最近的公共祖先一定是满足p->val < root->val < q->val的 class Solution { public:TreeNode* lowestCommonAncestor(TreeNode* root, TreeNode* p, Tr…

CSS:浮动

▐ 文档流&#xff1a; 由于网页默认是一个二维平面&#xff0c;当我们在网页中一行行摆放标签时&#xff0c;块标签会独占一行&#xff0c;行标签则只占自身大小&#xff0c;这种情况下要实现网页布局就很麻烦了&#xff0c;所以我们就需要通过一些方法来改变这种默认的布局方…

牛客NC236 最大差值【simple 动态规划 Java/Go/PHP】

题目 题目链接&#xff1a; https://www.nowcoder.com/practice/a01abbdc52ba4d5f8777fb5dae91b204 思路 不难看出该题可以使用动态规划的方式解题。 在循环数组的过程中&#xff0c;记录截止到当前位置-1的最小值&#xff0c; 然后用当前的值去计算最大的差值。Java代码 im…

贝叶斯算法:机器学习中的“黄金法则”与性能提升之道

&#x1f440;传送门&#x1f440; &#x1f50d;机器学习概述&#x1f340;贝叶斯算法原理&#x1f680;贝叶斯算法的应用✨文本分类✨医疗系统 &#x1f496;贝叶斯算法优化✨贝叶斯算法优化的主要步骤✨贝叶斯算法优化的优点✨贝叶斯算法优化的局限性 &#x1f697;贝叶斯算…

理解OAuth:服务间的授权机制

理解OAuth:服务间的授权机制 好的,让我来教你一下关于这个奇怪的东西。 在不同的项目中,认证有很多不同的方式。但在我们深入探讨它的使用方式之前,让我们先来看看它最初的用途。 首先,我们可以从名称中得到一些线索。“auth”这个词与什么有关呢?问题是,这里的“aut…

生意人【着眼于未来、公私分明、有决断又有人情味、立场、享受过程】

宁可给钱给别人看病&#xff0c;也不收原材料做到公私分明。 老板最怕干部越权&#xff0c;你要先跟老板商量&#xff0c;老板有一个最后点头权 例如&#xff1a;这件事情先谈到这里&#xff0c;我回去请示一下老板&#xff0c;如果他答应&#xff0c;我立刻给你回复。 人只要…

ctfshow web入门 嵌入式 bash cpp pwn

kali转bash shell方法 方便我们本地 bash脚本教程 下面这个代码是bash脚本 #!/bin/bashOIFS"$IFS"IFS"," //表示逗号为字段分隔符set $QUERY_STRING //将参数传入数组Args($QUERY_STRING)IFS"$OIFS" //恢复原始IFS值if [ "$…

React 其他 Hooks

其他 Hooks useRef 可用于获取 DOM 元素 const ScrollRef useRef(null)ScrollRef.current useContext &#xff08;先回顾一下之前的 Context 知识&#xff0c;借用之前 ppt 和源码&#xff09; Hooks 中使用 useContext 来获取 context 的值 // 父组件创建 contextexpor…