element中使用loading,加载中

前言：

在element中使用loadding的时候，在js中调用的，还是不太方便，这里把他封装下。

先写一个 loading.js 文件：

import { Loading } from 'element-ui';let loadingCount = 0;
let loading;const startLoading = () => {loading = Loading.service({lock: true,text: '加载中……',background: 'rgba(0, 0, 0, 0.7)'});
};const endLoading = () => {loading.close();
};export const showLoading = () => {if (loadingCount === 0) {startLoading();}loadingCount += 1;
};export const hideLoading = () => {if (loadingCount <= 0) {return;}loadingCount -= 1;if (loadingCount === 0) {endLoading();}
};

调用：

import { showLoading, hideLoading } from './loading';showLoading();//打开加载中hideLoading();//关闭加载中

element中使用loading,加载中相关推荐

微信小程序——焦点图可预览查看大图缩放（多张可左右滑动）带页码 loading 加载中 / https不显示图
微信小程序焦点图,可以滑动预览大图缩放微信小程序自带焦点图swiper ,但是没有页码,只有小圆点,所以要自己写 (在查看大图时遇到一个问题,安卓上查看大图部分图不显示,经排查,发现不显示的图片地址 ...
微信小程序两种loading加载中显示方式
在微信开发中,为了用户更加友好的体验,一般在数据请求的时候就显示动态加载中的显示字样,表示数据正在加载,用户请耐心等待. 一般有两种显示方式(其实是三种,showToast和showLoading写法 ...
CSS3制作加载中loading动画效果
常见的loading加载中通常是使用一个gif来实现动画效果,实际上我们可以使用css3的特性来制作,本文介绍了一种线性加载效果的css3制作方法. 在web开发中经常遇到ajax的加载,那个加载中的 ...
vue项目中设置全局loading时遇到多个请求时loading加载显示问题
问题详细描述项目设置全局loading动画加载,如果页面一次加载了多个请求 ,当其中有一个接口请求成功后 loading加载动画会消失,但是其实此时还有一个接口还未请求成功那么其实加载动画不应 ...
点击提交按钮，按钮变灰，页面正在加载中
<div class="loading">加载中<img src="img/1.gif" alt=""></d ...
利用Android属性动画实现有趣的加载中动效
本文目的平时Android项目中看到的加载中的动效基本上就是转圈的形式,有点审美疲劳.前一篇文章通过ViewGroup做了一个简单的加载中的动效,上一篇文章的主要知识点基于ViewGroup实现自定 ...
mint-ui 图片懒加载及请求数据加载中提示方法
图片懒加载: 引入需要的文件 <script src="https://unpkg.com/vue-lazyload/vue-lazyload.js"></scr ...
loading加载和layer.js
layer.js中的loading加载 l本篇主要介绍layerjs中的loading加载在实际项目中的应用 1.使用的技术前端:HTML5+CSS3+JS+layer.js 后端:.net 2. ...
vue项目中，设置页面局部loading加载效果（element）
直接引用element的loading,默认的是全屏loading,实际中有很多地方不需要全屏loading,只需要某部分loading,如上图话不多说,直接上代码封装好的loading.js i ...

element中使用loading,加载中

前言：

在element中使用loadding的时候，在js中调用的，还是不太方便，这里把他封装下。

先写一个 loading.js 文件：

调用：

element中使用loading,加载中相关推荐

最新文章

热门文章