场景
在一些按钮的点击操作中，假如没有限制，用户多次点击，会向后台发送多次请求。
还有一种情况是：当页面加载时，假如数据没有加载完成，此时为了防止用户进行操作，会显示一个遮罩：加载中...。这个操作和上面差不多，只是触发方式不同，一个是在生命周期中触发，一个是通过用户点击触发
实现
方式一 iview-遮罩loading
html:
<Spin fix v-show="isSpinShow">
<Icon type="load-c" size="30" class="demo-spin-icon-load"></Icon>
<div>Loading...</div>
</Spin>
<div @click="sendRequest">发送请求</div>
css:
/* 旋转效果 */
.demo-spin-icon-load{
animation: ani-demo-spin 1s linear infinite;
}
@keyframes ani-demo-spin {
from { transform: rotate(0deg);}
50% { transform: rotate(180deg);}
to { transform: rotate(360deg);}
}
/* 假如内容过长，一屏放不下，滚动条下拉覆盖不全 */
.ivu-spin-fix {
position: fixed;
}
js:
data () {
return {
isSpinShow: false,
}
},
methods: {
sendRequest() {
// 假如有验证，在一系列验证之后
if (this.isSpinShow === false) {
this.isSpinShow = true
axios.get('/sendRequest').then((res) => {
if (res.status === 200) {
this.isSpinShow = false
}
}).catch(() => {
this.isSpinShow = false
})
}
}
}
方式二 iview-按钮loading
html:
<Button type="primary" :loading="isBtnLoading" @click="sendRequest">发送请求</Button>
js:
data () {
return {
isBtnLoading: false,
}
},
methods: {
sendRequest() {
// 假如有验证，在一系列验证之后
if (this.isBtnLoading === false) {
this.isBtnLoading= true
axios.get('/sendRequest').then((res) => {
if (res.status === 200) {
this.isBtnLoading= false
}
}).catch(() => {
this.isBtnLoading= false
})
}
}
}
当你使用了遮罩的方式，并且在向后台发送请求之前进行了验证，验证提示是以Message弹窗显示的，当用户多次点击时，会重复出现多次提示信息。
html:
<Button type="primary" :loading="isBtnLoading" @click="sendRequest">发送请求</Button>
js:
data () {
return {
isBtnLoading: false,
}
},
methods: {
sendRequest() {
// 在方法的最顶部设置，防止多次弹出相同提示信息
this.isBtnLoading = true
setTimeout(() => {
this.isBtnLoading = false
}, 2000)
axios.get('/sendRequest').then((res) => {
if (res.status === 200) {
}
}).catch(() => {
})
}
}
问题
css样式：弹窗遮罩层在拉滚动条发现遮罩层没铺满屏幕
解决方式：把absolute换成fixed
iview样式源码：
.ivu-spin-fix {
position: absolute;
top: 0;
left: 0;
z-index: 8;
width: 100%;
height: 100%;
background-color: hsla(0,0%,100%,.9);
}
更改为position: fixed;
自己写遮罩的话，原理也是相同。
