83 lines
1.6 KiB
Java
83 lines
1.6 KiB
Java
<template>
|
|
<div class="loading-box" :style="style" v-if="loading">
|
|
<div class="loading-content">
|
|
<a-icon class="loading" type="loading" />
|
|
<div class="loading-tips">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'JLoading',
|
|
props: {
|
|
// 是否显示隐藏
|
|
loading: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 是否固定
|
|
fixed: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
style: {}
|
|
}
|
|
},
|
|
mounted() {
|
|
if (this.fixed) {
|
|
const el = $(this.el)
|
|
const top = `${el.offset().top}px`
|
|
const left = `${el.offset().left}px`
|
|
const width = `${el.outerWidth()}px`
|
|
const height = `${el.outerHeight()}px`
|
|
this.style = {
|
|
position: 'fixed',
|
|
top,
|
|
left,
|
|
width,
|
|
height,
|
|
'z-index': 1000
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="less">
|
|
.loading-box{
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
z-index: 111999;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
border-radius: 8px;
|
|
user-select: none;
|
|
.loading-content{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
color: #21c9cc;
|
|
transform: translate(-50%, -50%);
|
|
text-align: center;
|
|
.loading{
|
|
font-size:28px ;
|
|
}
|
|
.spin-loading{
|
|
animation: rotating 2s linear infinite;
|
|
}
|
|
.loading-tips{
|
|
margin-top: 5px;
|
|
font-size: 16px;
|
|
color: #21c9cc;
|
|
}
|
|
}
|
|
}
|
|
</style> |