vue中loading的使用,vue实现loading插件
这篇文章主要介绍了某视频剪辑软件前端页面数据加载添加装货效果的实现方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
目录
前端页面数据加载添加装货效果具体实现全局装货配置一再src/组件/微调器下面建立一个index.vue2再实用工具下面工具。联署材料3再实用工具下面建议一个请求。射流研究…封装的爱可信请求四修改app.vue
前端页面数据加载添加loading效果
在前端上传文件或者加载数据的时候会有一段等待时间，如果加上一个装货效果会减轻用户等待的枯燥，这里就来记录学习一下如何实现装货效果。
效果大致如下，样式我们是可以自定义的。
具体实现
让thisContent=这个
让loading=thisContent .$正在加载({
锁：真的，
文本： 上传中，请稍候.
微调器：“el图标加载",
背景： rgba(0，0，0，0.5)
})
//中间进行一系列的操作
//上传成功后关闭正在加载，并显示上传成功
正在加载。close()；
这是c .$message(上传文件成功);
这样一个简单的装货效果就实现了。
全局loading配置
请求的时候需要一个全局装货来拦截若是页面单独引用的话就有点繁琐了所以需要再全局封装一个此时就要明白再哪里封装了先考虑一下为什么要用
一方面是为了防止重复操作
另一方面是为了一个加载的效果能够更明显
所以再请求的时候加就能联想到爱可信拦截器的位置处理了话不多说开始撸代码全程复制就行了
1 再src/componennts/Spinner下面建立一个index.vue
模板
div class= loading-page BG-opacity :style= { display:hide？无":"块"}"
div class= dark @ dblclick= close
div class球-旋转-顺时针la-2x
分区/分区
分区/分区
分区/分区
分区/分区
分区/分区
分区/分区
分区/分区
分区/分区
/div
/div
/div
/模板
脚本
导出默认值{
data() {
返回{
隐藏：真
}
},
方法：{
close() {
document.querySelector( .正在加载-第页)。风格。display= none
}
}
}
/脚本
！-添加"限定范围"属性以将半铸钢钢性铸铁(Cast Semi-Steel)仅限制到此组件-
样式范围的语言=scss 。显示{
显示：块；
}。隐藏{
显示：无；
}。加载-页面{
背景：rgba(0，0，0，65);
显示：无；
位置：固定；
top:0；
左：0;
右：0;
底部：0;
最小高度：100%;
最小宽度：100%;
过渡：全1;
z指数：20000;隐藏{
显示：无；
}。背景-不透明度{
背景：rgba(0，0，0，0)；
}。黑暗{
宽度：100像素
高度：100像素
边框半径：10px
背景：rgba(0，0，0，65);
位置：绝对；
top:40%；
左：50%;
左边距：-50px；
文本对齐：居中；
img {
宽度：70px
高度：70px
边距-顶部：15px
}
}
}。拉-球-旋转-顺时针{
宽度：64px
身高：64px
边距-顶部：18px
左边距：18px
显示：块；
字体大小：0;
颜色：# fff
位置：相对；
框大小：边框-框；
动画-播放-状态：运行；
}。拉-球-旋转-顺时针方向
宽度：16px
高度：16px
边距-顶部：-8px；
左边距：-8px；
位置：绝对；
边框半径：100%;
动画：球-旋转-顺时针1s无限渐出；
显示：内嵌-块；
浮动：无；
背景色：当前颜色
边框：0纯色当前颜色
动画-播放-状态：运行；
}。la-ball-spin-clock wise div:n-child(1){
top:5%；
左：50%;
网络工具包-动画-延迟：-.875s
蚊子动画-延时：-.875s
用作复合形式的末尾元音动画-延迟：-.875s
动画-延迟：-.875s
}。la-ball-spin-clock wise div:n-child(2){
top:18.1801948466%；
左：81.8198051534%;
-网络工具包-动画-延迟：-.75s
蚊子动画-延时：-.75s
用作复合形式的末尾元音动画-延迟：-.75s
动画-延迟：-.75s
}。la-ball-spin-clock wise div:n-child(3){
top:50%；
左：95%;
-网络工具包-动画-延迟：-.625s
蚊子动画-延时：-.625s
用作复合形式的末尾元音动画-延时：-.625s
动画-延时：-.625s
}。la-ball-spin-clock wise div:n-child(4)
顶：81.8198051534%;
左：81.8198051534%;
-网络工具包-动画-延迟：-.5s；
蚊子动画-延时：-.5s；
用作复合形式的末尾元音动画-延时：-.5s；
动画-延时：-.5s；
}。la-ball-spin-clock wise div:n-child(5)
top:94.9999999966%；
左：50.0000000005%;
-网络工具包-动画-延迟：-.375s
蚊子动画-延时：-.375s
用作复合形式的末尾元音动画-延时：-.375s
动画-延时：-.375s
}。la-ball-spin-clock wise div:n-child(6){
top:81.8198046966%；
左：18.1801949248%;
-网络工具包-动画-延迟：-.25s
蚊子动画-延时：-.25s
用作复合形式的末尾元音动画-延时：-.25s
动画-延迟：-.25s
}。la-ball-spin-clock wise div:n-child(7)
top:49.9999750815%；
左：5.0000051215%;
-网络工具包-动画-延迟：-.125s
蚊子动画-延时：-.125s
用作复合形式的末尾元音动画-延时：-.125s
动画-延时：-.125s
}。la-ball-spin-clock wise div:n-child(8){
顶：18.179464974%;
左：18.1803700518%;
-网络工具包-动画-延迟：0s；
蚊子动画-延时：0s；
-o-animation-delay:0s；
动画-延迟：0s；
}
@-网络工具包-关键帧球-旋转-顺时针{
0%,100%{
不透明度：1;
-WebKit-transform:scale(1)；
变换：缩放(1)}
20%{
不透明度：1
}
80%{
不透明度：0;
-WebKit-transform:scale(0)；
变换：缩放(0)
}
}
@-蚊子-关键帧球-顺时针旋转{
0%,100%{
不透明度：1;
-moz-transform:scale(1)；
变换：缩放(1)
}
20%{
不透明度：1
}
80%{
不透明度：0;
-moz-transform:scale(0)；
变换：缩放(0)
}
}
@-o-关键帧球-顺时针旋转{
0%,100%{
不透明度：1;
-o型转换：标度(1);
变换：缩放(1)
}
20%{
不透明度：1
}
80%{
不透明度：0;
-o-transform:scale(0)；
变换：缩放(0)
}
}
@关键帧球-顺时针旋转{
0%,100%{
不透明度：1;
-WebKit-transform:scale(1)；
-moz-transform:scale(1)；
-o型转换：标度(1);
变换：缩放(1)
}
20%{
不透明度：1
}
80%{
不透明度：0;
-WebKit-transform:scale(0)；
-moz-transform:scale(0)；
-o-transform:scale(0)；变换：缩放(0)
}
}
/风格
2 再utils下面tools.js
类别消息{
静态加载(){
document.querySelector( .正在加载-第页)。风格。display= block
}
静态隐藏加载(){
document.querySelector( .正在加载-第页)。风格。display= none
}
}
导出{
工具，
味精
}
3 再utils下面建议一个request.js 封装的axios请求
从" axios "导入爱可信
从" qs "导入全国工业产品生产许可证
从"元素-用户界面"导入{ MessageBox，Message }
从" @/商店"导入商店
从" @/utils/auth "导入getToken
从@/路由器导入路由器
从" @/实用工具/工具"导入{ Msg }；
从" @/utils/auth "导入{移除令牌}
var all resquest=0；
//创建爱可信实例
const service=axios.create({
基本URL:进程。环境。vue _ APP _ BASE _ API，//api的基本网址
withCredentials: true，//跨域请求时发送饼干
paramsSerializer: params={ //查询字符串中的数组不使用方括号
return qs.stringify(params，{ indexes:false })
},
超时：15000 //请求超时
})
//请求拦截器
服务。截击机。请求。使用(
配置={
if (store.getters.token) {
配置。headers[ Authorization ]= Bearer getToken()
配置。头[过滤模式]=本地存储。getitem(数据类型)
}
config.headers[project]=csr
all resquest=all resquest 1；
if (config.mask！==true) {
Msg.loading()
}
返回配置
},
错误={
退货承诺。拒绝（错误)
}
)
//响应拦截器
服务。拦截器。响应。使用（
/**
*如果您想获得诸如标题或状态等信息
*请返回响应=响应
*/
/**
* 下面的注释为通过在反应里，自定义密码来标示请求状态
* 当密码返回如下情况则说明权限有问题，登出并返回到登录页
* 如想通过XMLHttpRequest来状态码标识逻辑可写在下面错误中
* 以下代码均为样例，请结合自生需求加以修改，若不需要，则可删除
*/
响应={
all resquest=all resquest-1；
const res=response.data
if (response.status===200) {
if(所有请求===0){
味精。隐藏加载()；
}
//50008 系统无此账号
//50010 账号禁用
//50012 账号或密码错误
//50013 主账号被禁用，禁止登录
//50014令牌失效
//50015 登录失败，无操作权限，请联系系统管理员！
//50016 验证码错误
//429 限流服务器拥挤，请稍后再试
//-999 未知错误
//403 无权限
if(RES . code===50008 RES . code===50010 RES . code===50012 RES . code===50013
资源代码===50016 资源代码===50015 资源代码===429 资源代码===-999 资源代码===403 资源代码===500){
消息({
消息：res.msg 错误，
类型："错误",
时长：5 * 1000,
偏移量：0
})
回报承诺。拒绝(RES . msg 错误)
} else if (res.code===50014) {
if (store.getters.token) {
移除令牌()
}
MessageBox.alert( res.msg，错误提示, {
confirmButtonText:确定，
回调：操作={
store.dispatch(“注销")
router.push(`/login `)
}
})
返回错误的
}
返回资源
}
},
错误={
all resquest=all resquest-1；
味精。隐藏加载()；
消息({
消息： 服务拥挤，请稍后重试!,
类型："错误",
时长：5 * 1000
})
退货承诺。拒绝（错误)
}
)
导出默认服务
4 修改app.vue
模板
div id=应用程序
路由器-视图/
旋转器/旋转器
/div
/模板
脚本
从"@/组件/微调器"导入微调器
导出默认值{
名称："应用程序",
组件：{
纺纱机
}
}
/脚本
风格
/风格
以上为个人经验，希望能给大家一个参考，也希望大家多多支持我们。
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。