一起写一个即插即用的VueLoading插件实现

config

117 浏览量 2020-12-30 03:01:33 上传评论收藏 155KB PDF 举报

资源详情

资源评论

资源推荐

一起写一个即插即用的一起写一个即插即用的Vue Loading插件实现插件实现

无论最终要实现怎样的网站，Loading状态都是必不可少的一环，给用户一个过渡喘息的机会也给服务器一个递达响应的时

间。

从使用方式说起从使用方式说起

不管从0开始写起还是直接下载的Loading插件，都会抽象为一个组件，在用到的时候进行加载Loading，或者通过API手动进

行show或者hide

<wait>

</wait>

...

this.$wait.show()

await fetch('http://example.org')

this.$wait.hide()

或者通过Loading状态进行组件间的切换

</loader>

</Main>

。要想注册成全局状态，还需要给axios类的网络请求包添加拦截器，然后设置一个全局Loading状态，每次有网络请求或者根

据已经设置好的URL将Loading状态设置为加载，请求完成后在设置为完成。

注册axios拦截器：

let loadingUrls = [

`${apiUrl}/loading/`,

`${apiUrl}/index/`,

`${apiUrl}/comments/`,

...

] axios.interceptors.request.use((config) => {

let url = config.url

if (loadingUrls.indexOf('url') !== -1) {

store.loading.isLoading = true

}

})

axios.interceptors.response.use((response) => {

let url = response.config.url

if (loadingUrls.indexOf('url') !== -1) {

store.loading.isLoading = false

}

})

使用时在每个组件下获取出loading状态，然后判断什么时候显示loading，什么时候显示真正的组件。

<div>

</loader>

</Main>

</div>

</template>

...

components: {

loader

computed: {

isLoading: this.$store.loading.isLoading

async getMainContent () {

// 实际情况下State仅能通过mutations改变.

this.$sotre.loading.isLoading = false

await axios.get('...')

this.$sotre.loading.isLoading = false

async getMain () {

await getMainContent()

}

...

</script>

在当前页面下只有一个需要Loading的状态时使用良好，但如果在同一个页面下有多个不同的组件都需要Loading，你还需要

根据不同组件进行标记，好让已经加载完的组件不重复进入Loading状态…随着业务不断增加，重复进行的Loading判断足以

让人烦躁不已…

整理思路整理思路

Loading的核心很简单，就是请求服务器时需要显示Loading，请求完了再还原回来，这个思路实现起来并不费力，只不过使

用方式上逃不开上面的显式调用的方式。顺着思路来看，能进行Loading设置的地方有，

设置全局拦截，请求开始前设置状态为加载。

设置全局拦截，请求结束后设置状态为完成。

在触发请求的函数中进行拦截，触发前设置为加载，触发后设置为完成。

判断请求后的数据是否为非空，如果非空则设置为完成

最终可以实现的情况上，进行全局拦截设置，然后局部的判断是最容易想到也是最容易实现的方案。给每个触发的函数设

置before和after看起来美好，但实现起来简直是灾难，我们并没有before和after这两个函数钩子来告诉我们函数什么时候调用了和

调用完了，自己实现吧坑很多，不实现吧又没得用只能去原函数里一个个写上。只判断数据局限性很大，只有一次机会。

既然是即插即用的插件，使用起来就得突出一个简单易用，基本思路上也是使用全局拦截，但局部判断方面与常规略有不同，

使用数据绑定(当然也可以再次全局响应拦截)，咱们实现起来吧~。

样式样式

Loading嘛，必须得有一个转圈圈才能叫Loading，样式并不是这个插件的最主要的，这里直接用CSS实现一个容易实现又不

显得很糙的：

</div>

</template>

...

.loading {

width: 50px;

height: 50px;

border: 4px solid rgba(0,0,0,0.1);

border-radius: 50%;

border-left-color: red;

animation: loading 1s infinite linear;

}

@keyframes loading {

0% { transform: rotate(0deg) }

100% { transform: rotate(360deg) }

}

</style>

固定大小50px的正方形，使用border-radius把它盘得圆润一些，border设置个进度条底座，border-left-color设置为进度条好了。

演示地址

绑定数据与绑定数据与URL

剩余6页未读，继续阅读

评论收藏

内容反馈

weixin_38727798

粉丝: 6
资源: 938

一起写一个即插即用的Vue Loading插件实现

评论0

最新资源

一起写一个即插即用的Vue Loading插件实现

评论0

自定义vue的loading插件

vue实现简单loading进度条

一个不一定好用但是挺好看的vueloading

Vue 全局loading组件实例详解

vue-loading:用于在客户端请求时阻塞

网页调试vue的必须插件

vue2-form-loading:VueJS指令可与表单一起使用，以禁用提交按钮并使提交后的每个输入均为只读

vue-cli 的元素插件.zip

使用Vue-Awesome-Swiper实现旋转叠加轮播效果&平移轮播效果

语法高亮插件vue-syntax-highlight

Vue.js标准型+科学型计算器插件

用vue和SUI-Mobile写了一个移动端demo，目的是反馈学习vue的结果（取消了SUI自带的路由，使用vue-router, vue-resource, webpack）vue & .zip

vue的props实现子组件随父组件一起变化

学习vue的双向绑定自己动手实现一个简单的todolist

Vue整合百度地图插件

基于xterm.js + gin + vue + websocket 的gotty web网页版实现，目的学习关键技术.zip

vue源码解析如何实现一个MVVM框架

vue-canvas-poster 海报合成

vue写的confirm确认框，loading加载中，message提示消息

spring boot项目和vue一起放在tomcat部署

vue+konva.js(未使用vue-konva)实现数据标注矩形和多边形功能

vue 弹框实现移动效果

【JavaScript源代码】vue实现旋转木马动画.docx

前端经典——vue实现登录页面开屏广告+校验demo.rar

Qt 5实现串口调试助手 （源工程文件、0积分下载）

【SystemVerilog】路科验证V2学习笔记（全600页）.pdf

AutoSAR标准协议4.2.2

光伏-储能并网系统仿真.rar

XCP协议的规范文档

最新资源

Qt 5实现串口调试助手（源工程文件、0积分下载）