vue加载动画element ui V-loading属性 踩坑记录

最新推荐文章于 2024-08-30 16:47:34 发布
最新推荐文章于 2024-08-30 16:47:34 发布
阅读量2.8k 收藏 4
点赞数 1
文章标签： vue.js 动画 ui
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/m0_47733490/article/details/121928987
版权

根据需求，由预览按钮打开弹窗，且弹窗需要渲染的数据较多，渲染的速度比较慢，所以要加一个加载中的效果，element ui的 v-loading属性就正好可以解决这一需求，但是当加入这一属性之后发现，是实现了加载功能，但是加载并不能自己判断何时停下，又不像其他页面需要页面刷新的时候出现加载动画效果，所以给diglog弹窗一个加载动画，但如何判断他何时停下呢

 

 想了好几种办法最后想通了，在点击弹窗的时候先给一个加载属性为true，让他加载，然后等请求接口赋值以后，再给他一个属性为false关掉加载，就可以了

 

刘大气
关注
优化浏览器标签loading效果时间过长思路
gz-郭小敏的博客
04-12 1479
首先要弄清楚浏览器loading效果是由什么引起的： document.readyState ！=complete 一个文档的readyState可以是以下之一： loading /加载 document仍在加载。 interactive /互动 文档已经完成加载，文档已被解析，但是诸如图像，样式表和框架之类的子资源仍在加载。 complete /完成 文档和所...
【Vue3-ElementPlus】关于v-loading不生效以及控制台输出[Vue warn]: Failed to resolve directive: loading 的问题
weixin_44733774的博客
12-11 3411
在main.js中导入ElLoading组件，并在app应用实例挂载app.mount之前加上一条指令注册语句，然后v-loading指令就能正常使用了。
el-table v-loading报错
Ethan's Blog
04-29 3217
今天使用el-table v-loading报错 Failed to resolve directive: loading github有相关bug issues#17952 解决办法也很简单： main.js 中添加 import { Loading } from 'element-ui'; Vue.use(Loading.directive); ...
vue 按需引用element按需引用 后v-loading无法生效
qq_42463588的博客
08-02 708
在使用Vue进行开发时，‌如果你采用了按需引用Element UI组件库的方式，‌可能会遇到v-loading指令无法生效的问题。‌这通常是因为按需引用时，‌相关的指令没有被正确引入。为了解决这个问题，‌你需要确保在按需引用Element UI组件的同时，‌也引入了Loading指令。‌你可以通过以下方式引入：‌。总结：‌确保在按需引用Element UI时，‌同时引入并注册了v-loading指令。这样，‌v-loading指令就会被正确注册，‌你就可以在模板中使用它了。
Vue首屏加载等待动画
风口浪尖的猪吖
09-09 2746
vue实现首屏加载等待动画 避免首次加载白屏尴尬的俩种实现方式 1.第一种效果代码 index.html中添加以下代码 <style type="text/css"> .first-loading-wrp { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 90vh; min-he
Vue--网站首屏加载等待动画（极简解决方案）
图南的博客
11-03 1103
解决白屏等待方案非常多，个人而言评判好坏的标准即用最少最简单的代码实现相同的功能。在Vue项目中，网站加载时会显示自定义动画（CSS），当文件加载完毕且页面显示时自动移除动画。
Vue加载中（Windows开机动画）
Mr Dear的博客
08-18 977
模仿Windows开机动画 支持自定义设置： 描述文案（tip），也可不传，默认不展示； 是否无限次循环动画（infinite），默认false； 完成一次动画后的间隔时长（interval），单位ms，默认200ms
ElementUI中LOADING服务无法关闭问题解决
qq_40493736的博客
01-07 1105
需要注意的是，以服务的方式调用的全屏 Loading 是单例的：若在前一个全屏 Loading 关闭前再次调用全屏 Loading，此时调用它们中任意一个的 close 方法都能关闭这个全屏 Loading。如果完整引入了 Element，那么上会有一个全局方法$loading，同样会返回一个 Loading 实例。
vue中使用v-loading不生效的问题
qq_41930094的博客
06-23 5764
vue中使用v-loading加载biaoz 的时候，因为折叠面板导致实效
vue element-ui Loading加载事件的使用以及自定义Loading加载动画
snrt_Aurora的博客
12-21 8083
怎么使用 Loading 加载事件
vue 实现element-ui中的加载中状态
01-18
需要添加加载状态，调用下面方法即可 //开启loading const load = _this.$loading({ lock: true, ...以上这篇vue 实现element-ui中的加载中状态就是小编分享给大家的全部内容了，希望能给大家一个参考
vue+axios+element ui 实现全局loading加载示例
01-21
实现全局loading加载 分析需求，我们只需要在请求发起的时候开始loading，响应结束的时候关闭loading，就这么简单 对不对？ ...function startLoading() { //使用Element loading-start 方法 loa
Vue3.0 + Ts 项目使用element-plus 自动按需导入 使用v-loading报错
weixin_44209082的博客
04-18 2394
问题展示： 使用v-loading报错 无法找到样式 element-plus/es/components/loading-directive/style/css 解决办法： element-plus版本： "element-plus": "^2.1.9" "unplugin-auto-import": "^0.7.1", "unplugin-vue-components": "^0.19.3" 使用正则表达式，排除loading-directive的样式 exclude: new RegExp(
VUE2:Element-UI中的loading加载的使用，以及如何在请求开始加载，在请求结束关闭
jialuosi的博客
03-14 5304
我们在很多请求的场景，尤其是那种大量数据渲染的页面下，都需要用到一个加载动画来过度这段时间，否则就会很突兀的展示给用户突然出现的数据，:Element-UI中的loading加载的使用，以及如何在请求开始加载，在请求结束关闭
踩坑日记2-Element Plus 按需加载 loading 加载样式问题
大补bu的博客
11-30 3851
theme: condensed-night-purple 起因 因为最近在学习 Vue3 + ts, UI库 选择了 Element Plus 但是我发现 按照Element官方 文档 按需引入 loading 的样式不起效果 文档链接 在做了相关配置后 但我在使用时发现loading样式没有生效(el-button 样式是有的 看图)， class 是添加上了，我就疑问样式去哪了？ 查找问题 首页看 el-button 源码， 好家伙一大堆 看不懂 那就先不看 el-button 去看 el-l.
在element-plus的Dialog组件中使用el-loading效果
最新发布
Hello_yihao的博客
08-30 409
如果直接在el-dialog上面加v-loading那么进入页面会报错，我查了下大概意思是：在具有非元素根节点的组件上使用的运行时指令，这些指令将无法按预期发挥作用（最近遇到一个需求，在页面中有个组件，子组件由el-dialog包裹，希望展示隐藏el-dialog时有加载动画，加载动画用的是v-loading。这个时候我换了种方式，使用element-plus提供的loading指令。当然如果不是父子组件，直接用v-loading就行了。
vue3.0 + element Plus点击按钮发送请求，添加loading加载状态
m0_52761651的博客
03-02 4498
vue3.0 + element Plus点击按钮发送请求，添加loading加载状态
vue使用setInterval做loading加载延时并及时清除计时
lee_amazing的博客
10-21 1664
延迟5s加载并及时清除计时，只需要吧clearInterval内嵌在setInterval中即可。 var loadingTime = setInterval(() => { this.loading = false clearInterval(loadingTime) }, 5000)
vue3+element-plus，在el-dialog中使用v-loading无效的解决方法
m0_61480985的博客
03-18 4195
在使用el-dialog的时候，想要实现点击弹框，出现加载中的效果
vue3中element-ui loading加载文字颜色改变
06-06
在Vue3中使用Element-UI的Loading组件，可以通过以下方式修改加载文字的颜色： 1. 在全局CSS中修改： ```css .el-loading-text { color: red; } ``` 2. 在组件中通过scoped CSS修改： ```vue <template> <div> <el-button @click="showLoading">显示Loading</el-button> <el-loading :text="loadingText" :visible="loadingVisible" :background="loadingBgColor" class="loading-wrapper"> </el-loading> </div> </template> <script> export default { data() { return { loadingText: '加载中...', loadingVisible: false, loadingBgColor: '#fff' } }, methods: { showLoading() { this.loadingVisible = true; } } } </script> <style scoped> .loading-wrapper .el-loading-text { color: red; } </style> ``` 在上面的代码中，我们通过在`.loading-wrapper`下面添加`.el-loading-text`的方式，修改了加载文字的颜色为红色。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值