Vue 全局loading組件實(shí)例詳解
上圖不上種,菊花萬人捅:
loading.js:
import './loading.css' let Loading = {} // 避免重復(fù)install,設(shè)立flag Loading.installed = false Loading.install = function (Vue) { if (Loading.installed) return Vue.prototype.$loading = {} Vue.prototype.$loading.show = () => { // 如果頁面有l(wèi)oading則不繼續(xù)執(zhí)行 if (document.querySelector('#vue-loading')) return // 1、創(chuàng)建構(gòu)造器,定義loading模板 let LoadingTip = Vue.extend({ template: `<div id="vue-loading"> <div class="loader"></div> </div>` }) // 2、創(chuàng)建實(shí)例,掛載到文檔以后的地方 let tpl = new LoadingTip().$mount().$el // 3、把創(chuàng)建的實(shí)例添加到body中 document.body.appendChild(tpl) // 阻止遮罩滑動(dòng) document.querySelector('#vue-loading').addEventListener('touchmove', function (e) { e.stopPropagation() e.preventDefault() }) Loading.installed = true } Vue.prototype.$loading.hide = () => { let tpl = document.querySelector('#vue-loading') document.body.removeChild(tpl) } } export default Loading
loading.css:
#vue-loading { width: 100%; height: 100%; position: absolute; left: 0; top: 0 } .loader { position: relative; width: 2.5em; height: 2.5em; transform: rotate(165deg); } .loader:before, .loader:after { content: ''; position: absolute; top: 50%; left: 50%; display: block; width: 0.5em; height: 0.5em; border-radius: 0.25em; transform: translate(-50%, -50%); } .loader:before { animation: before 2s infinite; } .loader:after { animation: after 2s infinite; } @keyframes before { 0% { width: 0.5em; box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75); } 35% { width: 2.5em; box-shadow: 0 -0.5em rgba(225, 20, 98, 0.75), 0 0.5em rgba(111, 202, 220, 0.75); } 70% { width: 0.5em; box-shadow: -1em -0.5em rgba(225, 20, 98, 0.75), 1em 0.5em rgba(111, 202, 220, 0.75); } 100% { box-shadow: 1em -0.5em rgba(225, 20, 98, 0.75), -1em 0.5em rgba(111, 202, 220, 0.75); } } @keyframes after { 0% { height: 0.5em; box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75); } 35% { height: 2.5em; box-shadow: 0.5em 0 rgba(61, 184, 143, 0.75), -0.5em 0 rgba(233, 169, 32, 0.75); } 70% { height: 0.5em; box-shadow: 0.5em -1em rgba(61, 184, 143, 0.75), -0.5em 1em rgba(233, 169, 32, 0.75); } 100% { box-shadow: 0.5em 1em rgba(61, 184, 143, 0.75), -0.5em -1em rgba(233, 169, 32, 0.75); } } /** * Attempt to center the whole thing! */ html, body { height: 100%; } .loader { position: absolute; top: calc(50% - 1.25em); left: calc(50% - 1.25em); }
這樣就可以直接在組件里面手動(dòng)調(diào)用啦!
調(diào)用方法: this.$loading.show(), this.$loading.hide()
因?yàn)檫@個(gè)項(xiàng)目暫時(shí)規(guī)模很小,就只有注冊(cè)功能,我直接把調(diào)用寫在axios請(qǐng)求攔截器里面,每次請(qǐng)求和請(qǐng)求結(jié)束都會(huì)調(diào)用loading,這樣就不用在頁面里面手動(dòng)調(diào)用啦。
總結(jié)
以上所述是小編給大家介紹的Vue 全局loading組件,希望對(duì)大家有所幫助,如果大家有任何疑問請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
相關(guān)文章
Vue動(dòng)態(tài)設(shè)置el-table操作列的寬度自適應(yīng)
這篇文章主要給大家介紹了關(guān)于Vue如何動(dòng)態(tài)設(shè)置el-table操作列的寬度自適應(yīng),很多頁面都需要用到表格組件el-table,如果沒有給el-table-column指定寬度,默認(rèn)情況下會(huì)平均分配給剩余的列,需要的朋友可以參考下2023-07-07Vue Echarts實(shí)現(xiàn)圖表的動(dòng)態(tài)適配以及如何優(yōu)化
這篇文章主要介紹了Vue Echarts實(shí)現(xiàn)圖表的動(dòng)態(tài)適配以及如何優(yōu)化,在實(shí)際的前端開發(fā)過程中,動(dòng)態(tài)適配是一個(gè)非常重要的問題,在數(shù)據(jù)可視化的場(chǎng)景下,圖表的動(dòng)態(tài)適配尤為重要,需要的朋友可以參考下2023-05-05vue-router 中router-view不能渲染的解決方法
本篇文章主要結(jié)合了vue-router 中router-view不能渲染的解決方法,具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2017-05-05Vue基礎(chǔ)popover彈出框編寫及bug問題分析
這篇文章主要為大家介紹了Vue基礎(chǔ)popover彈出框編寫及bug問題分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-09-09如何使用HBuilderX把vue項(xiàng)目打包成apk
這篇文章主要介紹了如何使用HBuilderX把vue項(xiàng)目打包成apk,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-07-07