element-ui中的loading的实际应用

实际开发中，要如何指定loading在我们想要的区域加遮罩呢？
前提：
你已经引入element-ui，如下：
import ElementUI from 'element-ui'
import { Loading } from 'element-ui'

1、在vue的原型链上定义一个打开loading的方法：

Vue.prototype.openLoading = function() {const loading = this.$loading({ // 声明一个loading对象 lock: true, // 是否锁屏 text: '正在加载...', // 加载动画的文字 spinner: 'el-icon-loading', // 引入的loading图标 background: 'rgba(0, 0, 0, 0.3)', // 背景颜色 target: '.sub-main', // 需要遮罩的区域 body: true, customClass: 'mask' // 遮罩层新增类名 }) setTimeout(function () { // 设定定时器，超时5S后自动关闭遮罩层，避免请求失败时，遮罩层一直存在的问题 loading.close(); // 关闭遮罩层 },5000) return loading; }

2、在开始请求接口是调用改方法，因为我们是直接定义在VUE原型链上的方法，所以我们可以直接this调用

const rLoading = this.openLoading();

3、请求成功后执行关闭操作：

rLoading.close();

作者：小太阳可可
链接：https://www.jianshu.com/p/df4a45488404
来源：简书
简书著作权归作者所有，任何形式的转载都请联系作者获得授权并注明出处。

转载于:https://www.cnblogs.com/sweeeper/p/11271834.html

element-ui中的loading的实际应用相关推荐

axios vue 加载效果动画_vue+axios+element ui 实现全局loading加载示例
实现全局loading加载分析需求,我们只需要在请求发起的时候开始loading,响应结束的时候关闭loading,就这么简单对不对? import axios from 'axios'; imp ...
Web前端笔记-element ui中table中某列添加a便签进行跳转
效果是这样的: 这里的文章标题和查看都可以进行跳转. 其中对应的代码如下: <template style="height: 100%"><el-table:da ...
Web前端笔记-修改element ui中表格样式（透明、去横纵线等含修改思路）
官方效果是这样的: 此处改成了这样的效果: 此处是可以进行滑动的,就是去除了滑动条,仍能滑动的效果. 下面说下修改样式,找到使用el-table的vue组建: 在style中贴上: <style ...
关于Element UI中select组件中遇到的问题
问题一:在使用select组件设置多选功能后,窗口抖动问题? 详细描述:在我使用select做多选的功能时出现了窗口抖动的问题,测试的时候发现,在有些人的电脑上抖动,有些人的电脑上不抖,找了很多文档, ...
关于Element UI中页面样式小问题
一,修改组件dialog窗口的大小二,在我使用upload组件上传一张美女图片时,发现当预览图片时,图片是灰色的,点击一下才会变亮,这种效果使我很不舒服,于是我通过添加下面的一条样式,问题解决了(可 ...
element ui 中 el-checkbox-group 点击一个全部选中的问题
element ui 中 el-checkbox-group 点击一个全部选中的问题原因是:checkbox-group中的v-modle要单独一个数组对象,不能作为表单对象,ruleForm中的一 ...
Element UI中Steps 步骤条description描述换行展示
突然要求加了个显示字段,之前的代码只能显示一行,于是乎找到了解决办法,代码如下:其中的属性自行到官网查看释义吧:Element UI官网传送门 <el-table><!-- 可展开的 ...
修改element ui中form表单的 label 颜色样式
此时,emement ui的form表单的label(年龄二字)是黑色的. 原代码: <template><el-form :model="numberValidateFo ...
element ui中的el-dropdown（下拉框）防止点一下就隐藏的问题
element ui中的el-dropdown(下拉框)防止点一下就影藏的问题当使用el-dropdown下拉框时,下拉框的每项中,可能需要加入@click.@change或复选框等事件,而el-d ...
使用xlsx 下载 element ui 中的表格
原文链接: 使用xlsx 下载 element ui 中的表格上一篇: MongoDB 聚合下一篇: vue router 路由守卫登录验证 https://github.com/SheetJS ...

element-ui中的loading的实际应用

element-ui中的loading的实际应用相关推荐

最新文章

热门文章