vue3 + vant 全局的loading效果制作，写的挺好的留个底

最新推荐文章于 2024-08-26 10:57:03 发布
最新推荐文章于 2024-08-26 10:57:03 发布
阅读量2.1k 收藏
点赞数
分类专栏： 前端-VUE
申请开通js
本文链接：https://blog.csdn.net/MrZachary_zlc/article/details/116155624
版权

文章链接：https://blog.csdn.net/qq_36247432/article/details/115540435

Zachary_zlc
关注
专栏目录
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
第5讲：VUE3工程中实现页面加载中效果和页面切换动画效果。
DVTOP的博客
11-09 3455
VUE3工程发布后的运行过程为先加载html面，再通过html页中的js加载单页面js来渲染页面并显示。 根据这个加载过程，实现页面加载中的原理是预先在html中显示加载中，再单页面数据加载完成在mounted时隐藏加载中，即实现想要的效果。 在public/index.html中添加加载中图层，对应的css自己根据需要设计即可。 <div id="dvtop-app-loading"> <div> <div class="dvtop
解决vue3+vant开发中loading效果的问题
qq_45919348的博客
12-29 2809
解决vue3+vant开发中loading效果的问题
v-loading（vue3 总结）
最新发布
qq_38210427的博客
08-26 232
添加自定义图标&::before{接口使用调节样式：可以吧tableLoading.value = false 注释，调节他的位置。
vue3 使用vant框架的van-list 上拉加载用法
会点php的前端小渣渣
09-08 602
【代码】vue3 使用vant框架的van-list 上拉加载用法。
vant的Loading加载动画组件的使用，通过接口拿数据时显示加载状态
m0_61663332的博客
01-09 6819
vant的Loading加载组件的使用：调用接口拿数据时，显示loading加载状态。请求完毕，结束加载状态。loading的全局使用以及单个请求的使用。
全局封装loading 加载样式 vue3
hfyldx的博客
08-18 1774
全局封装加载样式
vue + vant 组建loading的使用
qq_45021462的博客
09-29 9271
在代码最后添加loading组建 <template> <div class='detail'> <div class="nav-bar"> <van-nav-bar :border='false'> <template #title> <div class="home-title">标题</div> </template&gt
vue 全局封装loading加载教程(全局监听)
01-18
为了页面美观，请求接口的时候延迟没有数据，页面感觉狠卡顿，封装loading，请求接口成功后隐藏掉（我这是用的vant 组件根据自己情况进行改变）。 第一步： 建立loading.vue <div class=loading> 加载中... ...
vue+axios+element ui 实现全局loading加载示例
01-21
实现全局loading加载 分析需求，我们只需要在请求发起的时候开始loading，响应结束的时候关闭loading，就这么简单 对不对？ import axios from 'axios'; import { Message, Loading } from 'element-ui'; import ...
vant-ui框架的一个bug(解决切换后onload不触发)
01-22
（我使用了第三种，全局引入方法） 方式一. 使用 babel-plugin-import (推荐) babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式 # 安装 babel-plugin-import ...
element和vant使用文件
02-20
3. **使用组件**：在Vue组件中，可以直接使用已引入的Element或Vant组件，例如： ```html <el-button>Element 按钮 <van-button>Van 按钮 ``` 4. **自定义样式**：通过`index.css`，开发者可以覆盖或...
如何使用vant库的loading组件
luoxiaonuan_hi的博客
08-16 8196
第二步，在vuex中定义全局变量loading，定义修改loading变量显示隐藏的方法。第三步，在App.vue主文件中引入全局变量loading在页面使用。第五步，在请求拦截器中和响应拦截器中统一设置loading。第一步，main.js文件引入下载的loading。...
Vant再vue-cli 4.x中按需加载
TO_Web的博客
09-06 401
在vue-cli 4.x中使用vant出现的问题,在这里记录一下 一. 如果使用按需加载,需要下载babel-plugin-import转换一下,下载 babel-plugin-import cnpm install babel-plugin-import -D **二. 在根目录中找到 babel.config.js 文件 , 添加字段 ** "plugins": [ ["import",{ "libraryName":"vant", "style":true
vue3中Vant的使用
Quentin0823的博客
06-13 5989
1.通过npm安装 二. 引入组件（推荐） 在基于 、 或 的项目中使用 Vant 时，推荐安装 unplugin-vue-components 插件，它可以自动按需引入组件1.安装插件 2.配置插件 基于 的项目，在 文件中配置插件： 完成以上两步，就可以直接使用 Vant 组件了： 另外还有两种方法： 1. 导入所有组件（不推荐） Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。 2.手动按需引入组件（不推荐） 在不使用任何构建插件
使用vuex在vue3.0 + vant 项目中的 loading加载
射手男很懒的博客
04-12 3595
由于项目需要，参考网上例子，自己动手写了一个，废话不多说，上代码。 在src目录下新建store目录，store目录下新建store.js文件 （已确保已装好vuex） import Vue from 'vue' import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { loading: false }, mutations: { show.
vue项目如何在main.js文件中使用vant组件的loading
@@小旭的博客
08-31 657
【代码】vue项目如何在main.js文件中使用vant组件的loading。
跟着 vant4 源码学习如何用 vue3+ts 开发一个 loading 组件，仅88行代码
u012384510的博客
02-14 642
2022年10月31日首发于掘金，现在同步到公众号。11. 前言大家好，我是若川。我倾力持续组织了一年多源码共读，感兴趣的可以加我微信 lxchuan12 参与。另外，想学源码，极力推荐关注我写的专栏《学习源码整体架构系列》，目前是掘金关注人数（4.6k+人）第一的专栏，写有20余篇源码文章。我们开发业务时经常会使用到组件库，一般来说，很多时候我们不需要关心内部实现。但是如果希望学习和深究里面的原...
loading怎么关闭 vant_vant的Loading加载组件的使用
weixin_39611275的博客
12-20 2228
在store.js中使用vuex全局控制loading显示与隐藏import Vue from 'vue'import Vuex from 'vuex'Vue.use(Vuex)export default new Vuex.Store({state: {LOADING: false},mutations: {showLoading(state) {state.LOADING = true},hi...
vue3封装全局loading
05-20
在Vue3中，我们可以使用`provide`和`inject`来实现全局loading的封装。首先，在根组件中创建一个loading组件： ```vue <template> <div v-if="loading" class="loading-mask"> <div class="loading-spinner"></div> </div> <slot></slot> </template> <script> export default { data() { return { loading: false } }, methods: { show() { this.loading = true }, hide() { this.loading = false } } } </script> <style> .loading-mask { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background-color: rgba(0, 0, 0, 0.7); display: flex; align-items: center; justify-content: center; z-index: 9999; } .loading-spinner { width: 40px; height: 40px; border: 3px solid #fff; border-top-color: #888; border-radius: 50%; animation: loading-spinner 0.8s linear infinite; } @keyframes loading-spinner { to { transform: rotate(360deg); } } </style> ``` 然后，在根组件中提供`loading`实例： ```vue <template> <loading v-slot="{ show, hide }"></loading> <router-view></router-view> </template> <script> import Loading from '@/components/Loading.vue' export default { provide: { loading: new Loading() } } </script> ``` 接下来，在需要使用loading的组件中使用`inject`注入`loading`实例，然后调用`show()`和`hide()`方法即可： ```vue <template> <div> <button @click="getData">加载数据</button> </div> </template> <script> export default { inject: ['loading'], methods: { async getData() { try { this.loading.show() // 请求数据 } catch (e) { console.error(e) } finally { this.loading.hide() } } } } </script> ``` 这样，我们就实现了一个简单的全局loading组件的封装。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值