85 lines
1.6 KiB
Vue
85 lines
1.6 KiB
Vue
<!-- loading组件 liuyan -->
|
|
<template>
|
|
<div class="loading-box" :style="style" v-if="loading">
|
|
<div class="loading-content">
|
|
<i class="i-icon el-icon-loading spin-loading"></i>
|
|
<div class="loading-tips">
|
|
<slot></slot>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'local-loading',
|
|
props: {
|
|
// 是否显示隐藏
|
|
loading: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 是否固定
|
|
fixed: {
|
|
type: Boolean,
|
|
default: false
|
|
},
|
|
// 固定依据元素
|
|
el: {
|
|
type: String,
|
|
default: '.container-box'
|
|
}
|
|
},
|
|
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: 8;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(255, 255, 255, 0.9);
|
|
user-select: none;
|
|
.loading-content{
|
|
position: absolute;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
color: #3391CE;
|
|
text-align: center;
|
|
.spin-loading{
|
|
animation: rotating 2s linear infinite;
|
|
}
|
|
.loading-tips{
|
|
margin-top: 5px;
|
|
font-size: 12px;
|
|
}
|
|
}
|
|
}
|
|
</style>
|