如何给弹窗加loading

最新推荐文章于 2024-06-03 16:39:14 发布
最新推荐文章于 2024-06-03 16:39:14 发布
阅读量208 收藏
点赞数 1
文章标签： vue.js javascript 前端
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Jjacica/article/details/137337706
版权
本文介绍了如何在ElementUI的el-descriptions或弹窗内的el-form组件中添加全屏加载状态，并自定义加载提示文本，提升用户体验。
摘要由CSDN通过智能技术生成

效果：

直接在el-descriptions或者你弹窗里面用到的el-form中加v-loading="fullscreenLoading" element-loading-text="拼命加载中"

Jjacica
关注
  • 1
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
AVuecomponenttovueloading一个加载中弹窗插件
08-10
A Vue component to vue-loading 一个加载中弹窗插件
集成Loading动画和Alert弹窗的库
04-04
本库集成了loading动画和Alert弹窗以及模态选项,使用起来比较方便. 功能如下： 1.弹出UIAlertView 标题 内容 确定按钮事件 取消按钮事件 2.弹出UIAlertView 标题 内容 3.弹出UIAlertView 标题 内容 确定按钮事件 4....
element弹框loading
chunchun_H
04-06 6144
弹框有两种插入模式，一种是基于写弹框的页面元素上，一种是插入至 body 元素上。 无论是哪种方式，在弹框请求数据渲染页面时，如果直接给弹框加loading，第一次渲染loading位置不对。如下图 loading的层级在弹框的下面 原因：loading一般加在弹框body内元素上，第一次渲染弹框body未找到就会加在弹框的最外层元素上，那层级自然不对。 解决方法：打开弹框后，再元素渲染后去打开loading this.$nextTick(() => { openLoading.
element 在弹框上loading加载
小聪的博客
01-22 4269
element 在弹框上loading加载 在需要弹出的元素上加 <el-table :data="tableData.data" stripe style="width: 100%" v-loading="fullscreenLoading" element-loading-text="正在加载数据" :element-loading-spinner="svg" element-loading-svg-view-box="-10, -10, 50, 50" ele
异步加loading
weixin_58431406的博客
10-27 687
el-form 中加 v-loading="loading"保存按钮中加:loading="submiting"点击修改按钮的时候打开this.loading=true;获取详情请求接口成功之后关闭 this.loading=false;点击保存的时候打开this.submiting=true;保存请求成功之后关闭 this.submiting=false;
el-dialog添加loading遮罩
QAWSASD的博客
03-26 574
el-dialog添加loading遮罩。
vue使用elementPlus ui框架，如何给Dialog 对话框添加Loading 自定义类名显示隐藏
技术前端，忠于热爱 @回忆哆啦没有A梦
03-12 1462
vue使用elementPlus ui框架时，如何给Dialog 对话框添加Loading 自定义类名，想要实现dialog对话框区域有loading效果，其他区域没有。
enementui中实现loding实现局部加载，以el-dialog为例
qq_58441775的博客
06-28 5052
enementui中实现loding实现局部加载，以el-dialog为例。
layui加载数据显示loading加载完成loading消失的实例代码
10-16
今天小编就为大家分享一篇layui加载数据显示loading加载完成loading消失的实例代码，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
可设置加载结果的Loading控件
07-17
可以设置加载结果Loading控件
Winform弹出等待窗口(附多种Loading资源gif图)
08-04
开发Winform程序的时，经常会用到等待窗口（如网络通讯、数据库操作等一些耗时操作），这样可以可以有更好的体验。  本例程等待窗口可以传入显示的问题... 另外添加了近百种loading加载gif动图显示，可满足各种需求。
element-plus dialog v-loading不生效
书读百遍，其义自见
01-23 6610
使用版本 “element-plus”: “1.3.0-beta.4” 问题 el-dialog的v-loading 这样使用没反应。 解决 定义ref 并使用 ElLoading.service setup定义 const me = ref(null) ElLoading.service({ target: me.value.dialogRef }) 结束语 为什么v-loading不生效，有人知道请留言。 ...
vue Element ui增加loading效果
m0_49471668的博客
11-23 3234
1.在需要加loading 的标签加v-loading="loading"，该项目为折线图 <div id="gate-shore1" class="gate-shore-wrap" v-loading="loading"></div> 2.在组件内引入Element-UI的Loading import { Loading } from 'element-ui' 3.在组件data里面增加属性及属性值loading: true 4.在方法里面写代码，关于组件的开
vue的element-ui添加加载中......v-loading，添加提示和图标
weixin_39249427的博客
04-08 9504
el-form、el-table都可以 v-loading="isShowLoading" element-loading-text="努力加载中..." element-loading-spinner="el-icon-loading" //随意换，参考文档：https://element.eleme.cn/#/zh-CN/component/icon ...
Vue添加Loading加载
yh_zeng2的博客
04-18 2369
Vue添加Loading加载
element-plus el-dialog使用v-loading指令失效
Arthur__Wong的博客
12-15 4230
目前解决方法是使用实例，效果是整个dialog模块存在loading，包括header，footer，内容和右上关闭按钮，
【踩坑日记】vue项目实现弹框整体loading效果（包括标题）
最新发布
lFFFFFFl的博客
06-03 251
使用elementUI的Loading.service实现弹框全覆盖效果的loading遮罩，并把它写成vue插件，在页面直接使用v-dialogLoading指令去显示与隐藏遮罩。
element UI中loading加载框的花式用法
热门推荐
钱多多的博客
07-27 1万+
前端为了优化体验效果必不可少的就是加载框loading的使用。接口是异步的，获取数据是需要时间的，万一网络再卡顿下，总不能让用户干等着没数据的页面。那loading就必不可少了！
element比较耗时的方法怎么加loading弹窗
03-20
可以使用异步编程的方式来解决element比较耗时的方法加loading弹窗的问题。具体实现方式是在方法执行前显示loading弹窗，然后使用异步编程的方式执行方法，方法执行完毕后关闭loading弹窗。以下是一个示例代码： ``` <template> <div> <el-button @click="handleClick">执行耗时方法</el-button> <el-dialog :visible.sync="loadingVisible"> <el-progress type="circle" :percentage="loadingPercentage"></el-progress> </el-dialog> </div> </template> <script> export default { data() { return { loadingVisible: false, loadingPercentage: 0 } }, methods: { async handleClick() { this.loadingVisible = true this.loadingPercentage = 0 const result = await this.longTimeMethod() this.loadingVisible = false console.log(result) }, longTimeMethod() { return new Promise(resolve => { setTimeout(() => { resolve('long time method result') }, 5000) }) } } } </script> ``` 在上面的代码中，我们使用了一个loadingVisible变量来控制loading弹窗的显示和隐藏，使用了一个loadingPercentage变量来控制loading进度条的进度。在handleClick方法中，我们首先将loadingVisible设置为true，然后使用异步编程的方式执行longTimeMethod方法，方法执行完毕后将loadingVisible设置为false。在longTimeMethod方法中，我们使用了Promise来模拟一个耗时的方法，方法执行完毕后返回一个结果。在实际应用中，我们可以将longTimeMethod替换为我们需要执行的耗时方法。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值