基于Vue 實(shí)現(xiàn)一個(gè)中規(guī)中矩loading組件
前言
最近有一個(gè)新的項(xiàng)目,UI大佬不知道從哪里找來(lái)了一張GIF丟到藍(lán)湖,說(shuō)作為全局的頁(yè)面loading ,但是自己想了想,還是選擇畫(huà)一個(gè)。
一開(kāi)始想過(guò)用svg,canvas;最終還是選擇了css3+js來(lái)實(shí)現(xiàn)這個(gè)效果;
gif的缺點(diǎn)挺多,至于為什么又排除了svg和canvas;
是因?yàn)閏ss3+js可控性更強(qiáng),不管是大小還是顏色,還是響應(yīng)式(我的項(xiàng)目走的vh,vw)那套來(lái)適配;
可以借助打包插件,達(dá)到loading的大小適配;
效果
UI大佬提供的GIF
實(shí)現(xiàn)的效果【在線codesandbox預(yù)覽】
- 支持環(huán)的顏色改變及整個(gè)展示大小
- 支持在loading底部顯示文字并控制其樣式
實(shí)現(xiàn)思路
這個(gè)東東主要用了這么幾個(gè)要點(diǎn)來(lái)實(shí)現(xiàn)完整的效果;
- flex和position來(lái)布局
- 偽類(lèi)的顏色繼承(currentColor)
- 邊框結(jié)合圓角實(shí)現(xiàn)環(huán)
- 用了transform和animation來(lái)實(shí)現(xiàn)了整個(gè)過(guò)渡
效果知道怎么實(shí)現(xiàn)了,剩下的就是我們需要實(shí)現(xiàn)的功能點(diǎn)了;
因?yàn)槭敲嫦蛞苿?dòng)端的,所以這些常規(guī)的東東也要考慮下
- 遮罩層可控
- 防止點(diǎn)擊穿透滾動(dòng)body
- 組件支持函數(shù)方法調(diào)用
源碼
Loading.vue
<template> <div id="loading-wrapper"> <div class="loading-ring" :style="ringStyle"> <div class="outer" /> <div class="middle" /> <div class="inner" /> </div> <div class="text" :style="textStyle" v-if="text"> {{ text }} </div> </div> </template> <script> export default { name: "Loading", props: { text: { type: String, default: "" }, textStyle: { type: Object, default: function() { return { fontSize: "14px", color: "#fff" }; } }, ringStyle: { type: Object, default: function() { return { width: "100px", height: "100px", color: "#407af3" }; } } }, methods: { preventDefault(e) { // 禁止body的滾動(dòng) console.log(e); e.preventDefault(); e.stopPropagation(); } }, mounted() { document .querySelector("body") .addEventListener("touchmove", this.preventDefault); }, destroyed() { document .querySelector("body") .removeEventListener("touchmove", this.preventDefault); } }; </script> <style lang="scss" scoped> #loading-wrapper { position: fixed; left: 0; top: 0; height: 100vh; width: 100vw; background-color: rgba(0, 0, 0, 0.25); display: flex; justify-content: center; align-items: center; flex-direction: column; .loading-ring { position: relative; width: 200px; height: 200px; .outer, .inner, .middle { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); color: currentColor; &::after { content: ""; display: block; width: 100%; height: 100%; border-radius: 100%; border-left: 10px solid currentColor; border-right: 10px solid currentColor; border-top: 10px solid currentColor; border-bottom: 10px solid transparent; } } .outer { width: 100%; height: 100%; &::after { animation: anticlockwise 1.5s infinite linear; } } .inner { width: calc(100% * 0.6); height: calc(100% * 0.6); &::after { animation: anticlockwise 1.5s infinite linear; } } .middle { width: calc(100% * 0.8); height: calc(100% * 0.8); &::after { animation: clockwise 1.5s infinite linear; } } } .text { color: #fff; font-size: 14px; padding: 30px; width: 250px; text-align: center; } } @keyframes clockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(360deg); } } @keyframes anticlockwise { 0% { transform: rotate(0deg); } 100% { transform: rotate(-360deg); } } </style>
index.js
import Loading from "./Loading.vue"; // 來(lái)保持實(shí)例,單例模式 let instance; let el; Loading.install = function(Vue, options = {}) { const defaultOptions = { text: "", textStyle: { fontSize: "14px", color: "#fff" }, ringStyle: { width: "100px", height: "100px", color: "#407af3" }, ...options }; Vue.prototype.$loading = { show(options = {}) { if (!instance) { let LoadingInstance = Vue.extend(Loading); el = document.createElement("div"); document.body.appendChild(el); instance = new LoadingInstance({ propsData: { defaultOptions, ...options } }).$mount(el); } else { return instance; } }, hide() { if (instance) { document.body.removeChild(document.getElementById("loading-wrapper")); instance = undefined; } } }; }; export default Loading;
選項(xiàng)及用法
選項(xiàng)
text: { // 這個(gè)不為空就在loading下面顯示文字 type: String, default: "" }, textStyle: { // loading text 的樣式,顏色及字體大小 type: Object, default: function() { return { fontSize: "14px", color: "#fff" }; } }, ringStyle: { // 最外環(huán)的大小,內(nèi)二環(huán)是比例換算的(百分比) type: Object, default: function() { return { width: "100px", height: "100px", color: "#407af3" }; } }
用法
在主入口use一下便可全局使用
除了常規(guī)的引入使用,還支持函數(shù)調(diào)用,掛載了一個(gè)$loading。
this.$loading.show({ text: "loading", textStyle: { fontSize: "18px", color: "#f00" } }); let st = setTimeout(() => { clearTimeout(st); this.$loading.hide(); }, 1000);
總結(jié)
props
的傳遞沒(méi)有做增量合并(遞歸每個(gè)key賦值),直接淺復(fù)制合并的對(duì)于組件功能的概而全,拓展性,大小需要自己權(quán)衡;
到這里,我們業(yè)務(wù)需要的一個(gè)小組件,該有的功能都有了。
以上所述是小編給大家介紹的基于Vue 實(shí)現(xiàn)一個(gè)中規(guī)中矩loading組件,希望對(duì)大家有所幫助,如果大家有任何疑問(wèn)請(qǐng)給我留言,小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對(duì)腳本之家網(wǎng)站的支持!
- Vue基于vuex、axios攔截器實(shí)現(xiàn)loading效果及axios的安裝配置
- Vue2.0 http請(qǐng)求以及l(fā)oading展示實(shí)例
- vue2實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求顯示loading圖
- vue實(shí)現(xiàn)圖片加載完成前的loading組件方法
- Vue 全局loading組件實(shí)例詳解
- vue+axios+element ui 實(shí)現(xiàn)全局loading加載示例
- vue-cli項(xiàng)目中使用公用的提示彈層tips或加載loading組件實(shí)例詳解
- 詳解vue使用vue-layer-mobile組件實(shí)現(xiàn)toast,loading效果
- Vue自定義全局Toast和Loading的實(shí)例詳解
- vuex+axios+element-ui實(shí)現(xiàn)頁(yè)面請(qǐng)求loading操作示例
相關(guān)文章
vscode中使用vue的一些插件總結(jié)(方便開(kāi)發(fā))
對(duì)于很多使用vscode編寫(xiě)vue項(xiàng)目的新手同學(xué)來(lái)說(shuō),可能不知道使用什么插件,下面這篇文章主要給大家介紹了關(guān)于vscode中使用vue的一些插件,文中通過(guò)圖文介紹的非常詳細(xì),需要的朋友可以參考下2022-11-11vue實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)按鈕
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)驗(yàn)證碼倒計(jì)時(shí)按鈕,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2021-08-08Vue?Echarts實(shí)現(xiàn)帶滾動(dòng)效果的柱形圖
這篇文章主要為大家詳細(xì)介紹了Vue?Echarts實(shí)現(xiàn)帶滾動(dòng)效果的柱形圖,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-04-04vue項(xiàng)目中js文件使用vue的this實(shí)例說(shuō)明
這篇文章主要介紹了vue項(xiàng)目中js文件使用vue的this實(shí)例說(shuō)明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2022-12-12elementUI?checkBox報(bào)錯(cuò)Cannot read property &ap
這篇文章主要為大家介紹了elementUI?checkBox報(bào)錯(cuò)Cannot read property 'length' of undefined的解決分析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-06-06