Vue与ElementUI的v-loading控件

原创 已于 2022-07-13 15:32:13 修改 · 4.8k 阅读 · 2 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #javascript #ecmascript

于 2022-07-13 15:31:58 首次发布
本文介绍了如何在Vue项目中使用Element UI的v-loading指令来创建和定制加载动画。通过设置v-loading的绑定变量控制加载状态，并利用element-loading属性添加文字提示和修改加载图标。同时，建议封装一个loading函数，以便在超时时关闭加载动画，增强用户体验。

Vue与Element的v-loading控件

在需要添加loading动画的组件中加入v-loading="xxx", xxx为true时表示加载，false时关闭加载，默认样式如下：
在这里插入图片描述
如果要修改样式或者添加文字，则使用element-loading进行修改
添加加载中提示文字：element-loading-text="拼命加载中"
修改加载中动画：element-loading-spinner="el-icon-loading"
最终效果为：
在这里插入图片描述
v-loading="xxx"使用时绑定变量动态修改true或false，在需要修改此变量的地方可封装一个loading函数，增加timeout设置，加载超时后停止此加载动画

ElementUI - 自定义全局 Loading 加载动图 spinner（不使用内置图标而是自定义动态图）
🏆 前端领域优质创作者
04-30 1万+
前言 ElementUI Loding 组件文档：https://element.eleme.cn/#/zh-CN/component/loading 默认的样式如下图所示，更改加载图标为动态的 GIF 图片。 改为自定义动图，但要注意 底部的提示文字不能再使用了。 实现 使用 服务方式 ，不要使用指令方式。 如下样式，便可覆盖样式达到效果，具体在什么地方使用请看最下面的 示例。 .el-loading-spinner .circular{ width: 42px; height: 4
Vue及Element UI&vue-element-admin简记
生活在别处
11-21 8534
文章目录概念索引安装vue基本语法声明式渲染动态参数双向绑定数据绑定中进行数据处理使用JS表达式计算属性侦听器Class 与 Style 的数据绑定Class的数据绑定Style的数据绑定条件与循环条件渲染v-if指令v-show指令列表（数组）渲染数据更新检测事件监听器修饰符事件修饰符按键修饰符按键码系统修饰键指令的缩写组件化应用构建vue实例实例生命周期的钩子模板语法高级语法相关概念HTML ...
loading样式，12种，颜色可修改
09-03
12种loading样式，css样式，需要的朋友可以看下，颜色可修改
Element UI Loading 两种使用方式对比
最新发布
蓝胖子的博客
09-09 294
本文对比了Element UI中两种加载指示器的使用方式：this.$loading()和Loading.service()。this.$loading()适用于Vue组件内部，能自动绑定实例并在组件销毁时清理，推荐在组件异步操作中使用。Loading.service()是全局服务，可在任何地方调用但需手动管理实例，适合全局拦截器和工具函数。文章提供了具体使用示例，并建议在finally块中关闭loading以确保错误时也能正确清理。关键区别在于使用环境、清理方式和实例管理，开发者应根据场景选择合适的方法。
v-loading
weixin_43550562的博客
10-29 6145
element-ui 内置的 v-loading 指令非常友好，只需要提供一个 Boolean 值就能实现加载动画的一个指令。 具体的使用方法归纳为：接口请求到数据之前，显示加载中。接口请求到数据之后，消失。 项目案例截图： 具体的功能为当我点击“查询”按钮之后，对应的查询清单list会呈现出来 首先在需要加载的dom中加入v-loading=“loading” 在data 中定义初始化， l...
vue自定义指令v-loading（vue2和vue3)
weixin_58031521的博客
02-16 1万+
vue实现自定义指令v-loading（包含vue2及vue3的写法）
react之模仿elementui的v-loading（加载）功能；react 添加等待加载功能；
仙途路漫漫其修远兮
12-02 1053
1. element-ui（vue的ui框架）的v-loading方法感觉非常棒，于是在react中实现一个类似的功能； 2. 功能使用介绍：函数接受两个参数，第一个是HTML或者组件，第二个为当前是否是加载中。根据切换第二个参数实现加载等待效果！ 3. 功能实现介绍：对传入的组件component.props.children进行操作，在其中添加进需要添加的加载功能代码（自定义加载），使用绝对定位的形式（不要加top、bottom、left、right）。
element上传大文件就报错500_VUE--ElementUI--文件上传(四)
weixin_30746095的博客
12-29 1633
一、文件上传基本页面action="http://localhost/goods-service/goods/sku/file"list-type="picture-card":on-success="handleImageSuccess":before-upload="beforeImageUpload":auto-upload="true"> import { ...
ElementUI el-tree高级应用：Vue项目中的完美集成
本文旨在介绍ElementUI库中el-tree组件的基础知识、集成配置、高级功能以及在Vue项目中的实践应用。首先对el-tree的基本概念和安装配置进行说明，随后详细探讨了其属性、事件处理、动态加载、过滤和多选等高级功能，...
ElementUI el-tree节点搜索优化：高效实现与技巧分享
[ElementUI el-tree节点搜索优化：高效实现与技巧分享](https://img-blog.csdnimg.cn/490c84b32ecc408c97bdedcf5c4e5ec1.png) # 摘要 本文全面探讨了ElementUI中el-tree组件的节点搜索功能，从基础理论到优化实践再...
解析elementui 中的v-loading指令
HelloWorldLJY的博客
05-26 4302
钩子函数 一个指令定义对象可以提供如下几个钩子函数 (均为可选)： bind：只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 inserted：被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。 update：所在组件的 VNode 更新时调用，但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变，也可能没有。但是你可以通过比较更新前后的值来忽略不必要的模板更新 (详细的钩子函数参数见下)。 我们会在稍后讨论渲染函数时介绍更多 VNodes
Vue进阶（六十一）：v-loading 实现加载效果及elementUI 中 el-date-picker中弹出的日期和时间的输入框设置为只读
热门推荐
IT全栈 华强工作室
07-11 6万+
在项目开发过程中，需要使用el-date-picker日期控件，需求是elementUI 中 el-date-picker中弹出的日期和时间的输入框设置为只读。在接口未请求到数据之前，显示加载中，直到请求到数据后消失。下的顶层元素上的话，就不会触发全屏。在接口的回调函数中，将。，到达加载动画效果。
v-loading的使用（ElementUI）
weixin_45369499的博客
05-21 3万+
前言：需要获取后端接口数据到页面上进行显示，所以在请求发起至数据渲染页面的这段时间，为页面提供一个 loading 加载是极为必要的。 1.区域加载     以 table 表格为例，使用 v-loading，为其绑定一个布尔值（true/false），代码如下： <template> <div id="index"> <!-- 表格 --> <el-table :data="tableData" v-load
前端学习（2562)：v-loading
歌谣的博客
11-11 193
vue项目中，设置页面局部loading加载效果（element）v-loading
大哥的博客
08-21 5708
vue项目中，设置页面局部loading加载效果（element）v-loading
v-loading的使用
qq_43235503的博客
05-16 1004
v-loading的使用
评论 1
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值