vue组件,mask前提是parent node需要设置postion reative 或者absolute等等,不能是static
<template>
<div :class="[show?'show':'','kl-mask-load']">
<slot></slot>
</div>
</template>
<script>
export default {
name: "mask-load",
props: {
show: {
default: false,
type: Boolean
}
}
}
</script>
<style scoped>
.kl-mask-load {
z-index: 9999;
background-color: #0a4d39;
opacity: 0;
position: absolute;
left: 0;
right: 0;
bottom: 0;
top: 0;
transition: opacity .2s ease-in;
display: grid;
align-items: center;
place-items: center;
pointer-events: none;
}
.kl-mask-load.show {
opacity: 1;
pointer-events: auto;
transition: opacity .2s ease-in;
}
</style>