loading.vue
<template>
????<div?class="custom-loading"??v-if="show">
????????<div?class="custom-loading-Mask"></div>
????????<div?class="custom-loading-box">
??????????<div?class="custom-loading-content">
????????????<!--?<img?:src="icon"?/>?-->
????????????<span>{{text}}</span>
????????????<em?:style="{borderLeftColor:progressColor}"></em>
??????????</div>
????????</div>
????</div>
</template>
<script>
export?default?{
????data(){
????????return{
????????????//?icon:require('../assets/img/wx.png'),
????????????show:false,
????????????text:'加載中...',
????????????progressColor:'#ff0000',
????????}
????},
}
</script>
<style>
.custom-loading{
??position:?fixed;
??width:?100%;
??height:?100%;
??top:?0;
??left:?0;
??z-index:?9999999999;
??display:?flex;
??justify-content:?center;
??align-items:?center;
}
.custom-loading-Mask?{
??position:?absolute;
??width:?100%;
??height:?100%;
??top:?0;
??left:?0;
??background:?rgba(0,0,0,.4);
}
.custom-loading-box{
??width:?168px;
??height:?168px;
??border-radius:?6px;
??background:?#fff;
??position:?relative;
??z-index:?100;
??display:?flex;
??justify-content:?center;
??align-items:?center;
}
.custom-loading-content{
??width:?136px;
??height:?136px;
??border-radius:?50%;
??display:?flex;
??justify-content:?center;
??align-content:center;
??flex-wrap:?wrap;
??border:?3px?solid?#eee;
??position:?relative;
}
.custom-loading-content:after{
}
@-webkit-keyframes?motion{
??0%{-webkit-transform:rotate(0deg);}
??25%{-webkit-transform:rotate(90deg);}
??50%{-webkit-transform:rotate(180deg);}
??75%{-webkit-transform:rotate(270deg);}
??100%{-webkit-transform:rotate(360deg);}
}
.custom-loading-content?img{
??width:?30px;
??height:?30px;
??margin-bottom:?20px;
}
.custom-loading-content?span{
??width:?100%;
??text-align:?center;
??font-size:?18px;
}
.custom-loading-content?em{
??position:?absolute;
??width:?136px;
??height:?136px;
??top:?-3px;
??left:?-3px;
??border:?3px?solid?transparent;
??border-left:?3px?solid;
??border-radius:?50%;
??box-sizing:?border-box;
??-webkit-animation:?motion?1s?infinite?linear;
??animation:?motion?1s?infinite?linear;
}
</style>
loading.js
import?myLoading?from?'./loading.vue';
export?default?{
????/*?
????*?Vue:Vue?構(gòu)造器
????*?options:可選插件參數(shù)
????*/
????install(Vue,?options)?{
????????/*
????????*Vue.extend：?https://cn.vuejs.org/v2/api/#Vue-extend
????????*使用基礎(chǔ)?Vue.extend?構(gòu)造器陨晶，創(chuàng)建一個(gè)“子類(lèi)”?(Loading)。參數(shù)是一個(gè)包含組件選項(xiàng)的對(duì)象(myLoading)钢猛。?
????????*然后?創(chuàng)建一個(gè)?Loading?的實(shí)例?Profile?掛載到一個(gè)HTMLElement實(shí)例上
????????*/
????????const?Loading?=?Vue.extend(myLoading);
????????const?Profile?=?new?Loading({
????????????el:?document.createElement('div')
????????});
????????/*
????????*el：?https://cn.vuejs.org/v2/api/#el
????????*loading.vue中的template模板內(nèi)容將會(huì)替換掛載的元素。掛載元素的內(nèi)容都將被忽略。?*所以Profile.$el最終是template里面的內(nèi)容
????????*/
????????//插入到?document.body?
????????document.body.appendChild(Profile.$el);
????????//這里插件接收三個(gè)值?icon?progressColor?如果注冊(cè)的時(shí)候傳入這些值則賦值給組件內(nèi)默認(rèn)值肢扯。
????????if(options){
????????????if(options.icon)
????????????????Profile.icon?=?options.icon;
????????????if(options.progressColor)
????????????????Profile.progressColor?=?options.progressColor;
????????}
????????//定義顯示隱藏的方法??open?會(huì)傳入一個(gè)text?字符串冈止。如果有則賦值給組件內(nèi)默認(rèn)值酌媒。
????????const?myLoadingMethod?=?{
????????????open(text)?{
????????????????Profile.show?=?true;
????????????????if(text){
????????????????????Profile.text?=?text;
????????????????}
????????????},
????????????hide(text)?{
????????????????Profile.show?=?false;
????????????????if(text){
????????????????????Profile.text?=?text;
????????????????}
????????????}
????????};
????????//添加實(shí)例方法?把自定義方法掛載到Vue構(gòu)造器的上,這樣每個(gè)實(shí)例都可以調(diào)用仁烹。
????????Vue.prototype.$myLoading?=?myLoadingMethod;
????}
}
最后在main.js引入
import?myLoading?from?'./components/loading/loading'
Vue.use(myLoading,{
????//?icon:require('./assets/img/ali.png'),
????progressColor:'blue'?
})
使用方式?
this.$myLoading.open()耸弄；?this.$myLoading.hide()
