溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
前言
最近有一個新的項目，UI大佬不知道從哪里找來了一張GIF丟到藍湖，說作為全局的頁面loading ，但是自己想了想，還是選擇畫一個。
一開始想過用svg,canvas;最終還是選擇了css3+js來實現這個效果；
gif的缺點挺多,至于為什么又排除了svg和canvas；
是因為css3+js可控性更強，不管是大小還是顏色，還是響應式(我的項目走的vh,vw)那套來適配；
可以借助打包插件，達到loading的大小適配;
效果
UI大佬提供的GIF
實現的效果【在線codesandbox預覽】
實現思路
這個東東主要用了這么幾個要點來實現完整的效果；
效果知道怎么實現了，剩下的就是我們需要實現的功能點了；
因為是面向移動端的,所以這些常規的東東也要考慮下
源碼
Loading.vue
<template>
<div id="loading-wrapper">
<div class="loading-ring" :>
<div class="outer" />
<div class="middle" />
<div class="inner" />
</div>
<div class="text" : 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的滾動
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";
// 來保持實例，單例模式
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;
選項及用法
選項
text: { // 這個不為空就在loading下面顯示文字
type: String,
default: ""
},
textStyle: { // loading text 的樣式，顏色及字體大小
type: Object,
default: function() {
return {
fontSize: "14px",
color: "#fff"
};
}
},
ringStyle: { // 最外環的大小，內二環是比例換算的(百分比)
type: Object,
default: function() {
return {
width: "100px",
height: "100px",
color: "#407af3"
};
}
}
用法
在主入口use一下便可全局使用
除了常規的引入使用，還支持函數調用,掛載了一個$loading。
this.$loading.show({
text: "loading",
textStyle: {
fontSize: "18px",
color: "#f00"
}
});
let st = setTimeout(() => {
clearTimeout(st);
this.$loading.hide();
}, 1000);
總結
props的傳遞沒有做增量合并(遞歸每個key賦值)，直接淺復制合并的對于組件功能的概而全，拓展性，大小需要自己權衡；
到這里，我們業務需要的一個小組件，該有的功能都有了。
以上所述是小編給大家介紹的基于Vue 實現一個中規中矩loading組件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對億速云網站的支持！
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
