H5加載提示

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()

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末咧虎,一起剝皮案震驚了整個(gè)濱河市卓缰,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖征唬,帶你破解...
    沈念sama閱讀 222,946評(píng)論 6 518
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件捌显,死亡現(xiàn)場(chǎng)離奇詭異,居然都是意外死亡总寒,警方通過(guò)查閱死者的電腦和手機(jī)扶歪,發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,336評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門(mén),熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)摄闸,“玉大人善镰,你說(shuō)我怎么就攤上這事∧暾恚” “怎么了炫欺?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,716評(píng)論 0 364
  • 文/不壞的土叔 我叫張陵,是天一觀的道長(zhǎng)熏兄。 經(jīng)常有香客問(wèn)我品洛,道長(zhǎng),這世上最難降的妖魔是什么摩桶? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,222評(píng)論 1 300
  • 正文 為了忘掉前任桥状,我火速辦了婚禮,結(jié)果婚禮上硝清,老公的妹妹穿的比我還像新娘辅斟。我一直安慰自己,他們只是感情好芦拿,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,223評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布砾肺。 她就那樣靜靜地躺著,像睡著了一般防嗡。 火紅的嫁衣襯著肌膚如雪变汪。 梳的紋絲不亂的頭發(fā)上,一...
    開(kāi)封第一講書(shū)人閱讀 52,807評(píng)論 1 314
  • 那天蚁趁,我揣著相機(jī)與錄音裙盾,去河邊找鬼。 笑死他嫡,一個(gè)胖子當(dāng)著我的面吹牛番官,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播钢属,決...
    沈念sama閱讀 41,235評(píng)論 3 424
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼徘熔,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了淆党?” 一聲冷哼從身側(cè)響起酷师,我...
    開(kāi)封第一講書(shū)人閱讀 40,189評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤讶凉,失蹤者是張志新(化名)和其女友劉穎,沒(méi)想到半個(gè)月后山孔,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體懂讯,經(jīng)...
    沈念sama閱讀 46,712評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,775評(píng)論 3 343
  • 正文 我和宋清朗相戀三年台颠,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了褐望。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片。...
    茶點(diǎn)故事閱讀 40,926評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡串前,死狀恐怖瘫里,靈堂內(nèi)的尸體忽然破棺而出,到底是詐尸還是另有隱情荡碾,我是刑警寧澤减宣,帶...
    沈念sama閱讀 36,580評(píng)論 5 351
  • 正文 年R本政府宣布,位于F島的核電站玩荠,受9級(jí)特大地震影響漆腌,放射性物質(zhì)發(fā)生泄漏。R本人自食惡果不足惜阶冈,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,259評(píng)論 3 336
  • 文/蒙蒙 一闷尿、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧女坑,春花似錦填具、人聲如沸。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,750評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)。三九已至碉就,卻和暖如春盟广,著一層夾襖步出監(jiān)牢的瞬間,已是汗流浹背瓮钥。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,867評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工筋量, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留,地道東北人碉熄。 一個(gè)月前我還...
    沈念sama閱讀 49,368評(píng)論 3 379
  • 正文 我出身青樓桨武,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親锈津。 傳聞我的和親對(duì)象是個(gè)殘疾皇子呀酸,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,930評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容