vue项目中，设置页面局部loading加载效果（element）

直接引用element的loading，默认的是全屏loading，实际中有很多地方不需要全屏loading，只需要某部分loading，如上图
话不多说，直接上代码
封装好的loading.js

import Vue from 'vue'// loading框设置局部刷新，且所有请求完成后关闭loading框
let loading
let needLoadingRequestCount = 0 // 声明一个对象用于存储请求个数
function startLoading (targetdq) {loading = Vue.prototype.$loading({lock: true,text: '努力加载中...',background: 'rgba(255,255,255,.4)',target: document.querySelector(targetdq) // 设置加载动画区域})
}function endLoading () {loading.close()
}
export function showFullScreenLoading (targetdq) {if (needLoadingRequestCount === 0) {startLoading(targetdq)}needLoadingRequestCount++
}
export function hideFullScreenLoading () {if (needLoadingRequestCount <= 0) returnneedLoadingRequestCount--if (needLoadingRequestCount === 0) {endLoading()}
}export default {showFullScreenLoading,hideFullScreenLoading
}

在需要的页面中，import引入这个loading.js
然后，就可以直接

// 显示loading
showFullScreenLoading('.right')  // right是要显示loading的盒子
// 隐藏loading
hideFullScreenLoading()

vue项目中，设置页面局部loading加载效果（element）相关推荐

vue项目中vue-scroller实现上拉加载和下拉刷新
vue目前是众所周知的流行框架大家都知道的,vue全家桶的成员是:vue-cli,vuex,vue-router,vue-axios(vue2.0).然后它的第三方插件也有很多,比如:vue-scro ...
怎么改vue项目的标题_如何动态修改Vue项目中的页面title
前言:在项目中,我们有时候需要修改Vue项目中的页面title. 方法有两种,①如果需要动态设置页面的title,可以直接使用document.title:②可以使用router的beforeEach ...
如何在vue项目中设置首页
如何在vue项目中设置首页 1.首先创建一个vue为后缀名的文件,最好在新建的文件夹下面创建,如下图所示: 说明:一般我们的主要页面代码都是写在vue 项目中的这个src文件夹下,项目中所会引用到的组 ...
在vue项目中设置网站图标
怎么在我们的Vue项目中设置自定义的网站图标: 首先我们需要先制作个ico图标,大小为32*32的,放到static文件夹下,附制作网站,我们把制作好的ico图片改名为:favicon.ico(注:必 ...
vue 项目中H5页面，实现大转盘活动
vue 项目中H5页面,实现大转盘活动 <template><div class="about"><div id="app"> ...
vue项目中设置网站图标
怎么在vue项目中设置网站图标: 1,先下载个icon图标,favicon.ico,大小为32*32的,放到static文件夹下: static文件是vue项目中用来存放静态资源的文件夹,放到这里的文 ...
使用HTML+CSS实现网页loading加载效果，支持定时或加载完成后隐藏
网页使用loading可以给用户带来更好的体验,避免网页渲染中长时间出现网页整体空白从而影响访客的体验,loading在部分大型APP也有在应用. 下面使用HTML+CSS+JS实现完整的Loadin ...
android 百分比loading,牛逼的loading加载效果
牛逼的loading加载效果介绍: AnimatedCircleLoadingView一个不错的loading加载效果,自定义AnimatedCircleLoadingView设置startDete ...
element使用自定义的loading加载效果
在使用loading加载的过程中,elementui提供了两种样式,但是针对不同的项目,也是有着不同的需求,需要不同的或者特制的loading加载效果. 解决思路如下: 结合elementui本身的标 ...

vue项目中，设置页面局部loading加载效果（element）

vue项目中，设置页面局部loading加载效果（element）相关推荐

最新文章

热门文章