vue加载中loading提示信息(iView Spin)

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue加载中loading提示信息(iView Spin)相关的知识,希望对你有一定的参考价值。

参考技术A

在一些按钮的点击操作中,假如没有限制,用户多次点击,会向后台发送多次请求。

还有一种情况是:当页面加载时,假如数据没有加载完成,此时为了防止用户进行操作,会显示一个遮罩:加载中...。这个操作和上面差不多,只是触发方式不同,一个是在生命周期中触发,一个是通过用户点击触发

html:

css:

js:

html:

js:

当你使用了遮罩的方式,并且在向后台发送请求之前进行了验证,验证提示是以Message弹窗显示的,当用户多次点击时,会重复出现多次提示信息。

html:

js:

css样式:弹窗遮罩层在拉滚动条发现遮罩层没铺满屏幕
解决方式:把 absolute 换成 fixed
iview样式源码:

更改为 position: fixed;
自己写遮罩的话,原理也是相同。

网站导航

以上是关于vue加载中loading提示信息(iView Spin)的主要内容,如果未能解决你的问题,请参考以下文章

vue:路由懒加载Loading chunk 1 failed.

iView的Message提示框

vue UI库iview源码解析

教你一步步封装vue的toast和loading组件

2019-03-28 重置iview表单错误提示

vue axios+element 全局的loading