1、全局插件,调用this.$loadDialog()
,通过this.$closeLoading()
关闭。
2、全屏展示。(扩展:可通过定位实现具体版块的加载效果。此文未实现!)
3、支持自定义加载内容或样式。
Use: main.js
import Loading from './plugin/Loading';
Vue.use(Loading);
import Vue from 'vue';
import loadDialog from './loading.vue';
const LoadDialog = (config) => {
let options = {
className: 'loader-chart',
messageTip: '加载中,请稍后'
};
if (config && typeof config !== 'object') {
options.content = config;
}
config = { ...options, ...config };
let Tpl = Vue.extend(loadDialog);
let instance = new Tpl();
for (let key in config) {
if (config.hasOwnProperty(key)) instance.$data[key] = config[key];
}
document.body.appendChild(instance.$mount().$el);
};
const closeLoading = () => {
let loadList = document.querySelectorAll('.load-loading-dialog');
for (let i = 0; i < loadList.length; i++) {
document.body.removeChild(loadList[i]);
}
}
export default {
install () {
Vue.prototype.$loadDialog = LoadDialog.bind(Vue);
Vue.prototype.$closeLoading = closeLoading.bind(Vue);
}
};
<template>
<div class="hart_loading load-loading-dialog">
<div class="box">
<div :class="className"></div>
<p v-if="messageTip" class="tip-msg">{{ messageTip }}</p>
</div>
</div>
</template>
<script type="text/javascript">
export default {
props:{
loadShow: {
type: Boolean,
default: true
},
className: {
type:String,
default:'loader-chart'
},
messageTip: {
type: String,
default: ''
}
},
created() {
console.log('>>>>>>', this.loadShow);
}
}
</script>
<style lang="scss" scoped>
.hart_loading{
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
z-index: 9999;
background-color: #fff;
border: 1px solid #fff;
box-sizing: content-box;
display: flex;
justify-content: center;
align-items: center;
.box {
display: inline-block;
border-radius: 3px;
font-size: 30px;
color: #5caeea;
padding: 1em;
margin-bottom: .25em;
vertical-align: top;
-webkit-transition: .3s color, .3s border;
transition: .3s color, .3s border;
[class*="loader-"] {
display: inline-block;
color: inherit;
vertical-align: middle;
pointer-events: none;
position: relative;
top: 40%;
left: 50%;
transform:translate(-50%,-50%)
}
.loader-chart {
width: 1em;
height: 1em;
border: .2em solid transparent;
border-top-color: currentcolor;
border-radius: 50%;
-webkit-animation: 1s loader-05 linear infinite;
animation: 1s loader-05 linear infinite;
top: 34%;
left: 50%;
margin-left: -15px;
&:before{
content: '';
display: block;
width: inherit;
height: inherit;
position: absolute;
top: -.2em;
left: -.2em;
border: .2em solid currentcolor;
border-radius: 50%;
opacity: .5;
}
}
.loader-iframe {
width: 1.5em;
height: 1.5em;
border: .05em solid #5264D9;
border-bottom-color: transparent;
border-radius: 50%;
-webkit-animation: 0.7s loader-03 linear infinite;
animation: 0.7s loader-03 linear infinite;
}
}
}
@-webkit-keyframes loader-05 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader-05 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@-webkit-keyframes loader-03 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
@keyframes loader-03 {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg);
}
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg);
}
}
</style>
<style scoped>
.tip-msg{
width: 100%;
text-align: center;
font-size: 14px;
}
</style>