Vue + Element 实现请求加载数据时显示动效( Loading 加载 )
element
A Vue.js 2.0 UI Toolkit for Web
项目地址:https://gitcode.com/gh_mirrors/eleme/element
免费下载资源
·
一、版本说明,参考 Element 官网
"vue": "^2.5.2",
"axios": "^0.18.1",
"element-ui": "^2.5.4"
二、封装加载文件的函数
2.1、在 src目录下 ,新建 api 目录, 新建 servicesHelp.js 文件
2.2、 servicesHelp.js 文件内容如下:
import { Loading } from 'element-ui'
import _ from 'lodash'
let needLoadingRequestCount = 0
let loading
function startLoading() {
loading = Loading.service({
lock: true,
text: '正在加载',
background: 'rgba(0, 0, 0, 0)'
})
}
function endLoading() {
loading.close()
}
const tryCloseLoading = () => {
if (needLoadingRequestCount === 0) {
endLoading()
}
}
export function showFullScreenLoading() {
if (needLoadingRequestCount === 0) {
startLoading()
}
needLoadingRequestCount++
}
export function tryHideFullScreenLoading() {
if (needLoadingRequestCount <= 0) return
needLoadingRequestCount--
if (needLoadingRequestCount === 0) {
_.debounce(tryCloseLoading, 100)() //延迟100ms
}
}
三、Axios 请求文件中, request 拦截器开启加载,response 拦截器关闭加载
四、组件中请求时,添加 { showLoading: true } , 请求拦截时根据 'showLoading' 属性值(属性名可修改),添加加载效果
4.1、get / post 请求时,最后的参数添加 { showLoading: true }, 即可显示加载效果
五、加载效果图
写给自己的随笔,有问题欢迎指出(Θ▽Θ)
GitHub 加速计划 / eleme / element
54.06 K
14.63 K
下载
A Vue.js 2.0 UI Toolkit for Web
最近提交(Master分支:1 个月前 )
c345bb45
5 个月前
a07f3a59
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update transition.md
* Update table.md
* Update table.md
* Update transition.md
* Update popover.md 5 个月前
更多推荐
已为社区贡献4条内容
所有评论(0)