53 行
1.7 KiB
JavaScript
可执行文件
53 行
1.7 KiB
JavaScript
可执行文件
Vue.component('common-loading', {
|
|
template: `<div v-if="show" style="width: 100vw;height: 100vh;position: fixed;top: 0;left: 0;display: flex;align-items: center;justify-content: center"
|
|
:style="{'background-color':loadingStyle.ModalBgColor,'z-index':zIndex}">
|
|
<div style="width:130px;height: 130px;display: flex;align-items: center;justify-content: center;flex-direction: column;border-radius: 5px"
|
|
:style="{'background-color': loadingStyle.messageBgColor}">
|
|
<i class="el-icon-loading" :style="{'color':loadingStyle.messageColor}"></i>
|
|
<p style="font-size: 14px" :style="{'color':loadingStyle.messageColor}">{{message}}</p>
|
|
</div>
|
|
</div>`,
|
|
props: {
|
|
'show': {
|
|
type: Boolean,
|
|
default: false,
|
|
},//是否显示
|
|
'message': {
|
|
type: String,
|
|
default: '',
|
|
},//提示文字
|
|
'loadingStyle': {
|
|
type: Object,
|
|
default: () => {
|
|
return {
|
|
ModalBgColor: 'rgba(0,0,0,0.5)',
|
|
messageColor: '#409EFF',
|
|
messageBgColor: '#ffffff',
|
|
}
|
|
},
|
|
},
|
|
},
|
|
data() {
|
|
return {
|
|
zIndex: 1,
|
|
}
|
|
},
|
|
methods: {
|
|
setZIndex() {
|
|
let zIndex = [...document.all].reduce((r, e) => Math.max(r, +window.getComputedStyle(e).zIndex || 0), 0);
|
|
console.log(zIndex);
|
|
this.zIndex = zIndex;
|
|
}
|
|
},
|
|
created() {
|
|
this.setZIndex();
|
|
},
|
|
watch: {
|
|
show(n) {
|
|
if (n) {
|
|
this.setZIndex();
|
|
}
|
|
}
|
|
}
|
|
});
|