前言
創(chuàng)新互聯(lián)專注于長汀企業(yè)網(wǎng)站建設(shè),自適應(yīng)網(wǎng)站建設(shè),電子商務(wù)商城網(wǎng)站建設(shè)。長汀網(wǎng)站建設(shè)公司,為長汀等地區(qū)提供建站服務(wù)。全流程按需設(shè)計(jì)，專業(yè)設(shè)計(jì)，全程項(xiàng)目跟蹤，創(chuàng)新互聯(lián)專業(yè)和態(tài)度為您提供的服務(wù)
最近有一個(gè)新的項(xiàng)目，UI大佬不知道從哪里找來了一張GIF丟到藍(lán)湖，說作為全局的頁面loading ，但是自己想了想，還是選擇畫一個(gè)。
一開始想過用svg,canvas;最終還是選擇了css3+js來實(shí)現(xiàn)這個(gè)效果；
gif的缺點(diǎn)挺多,至于為什么又排除了svg和canvas；
是因?yàn)閏ss3+js可控性更強(qiáng)，不管是大小還是顏色，還是響應(yīng)式(我的項(xiàng)目走的vh,vw)那套來適配；
可以借助打包插件，達(dá)到loading的大小適配;
效果
UI大佬提供的GIF
實(shí)現(xiàn)的效果【在線codesandbox預(yù)覽】
實(shí)現(xiàn)思路
這個(gè)東東主要用了這么幾個(gè)要點(diǎn)來實(shí)現(xiàn)完整的效果；
效果知道怎么實(shí)現(xiàn)了，剩下的就是我們需要實(shí)現(xiàn)的功能點(diǎn)了；
因?yàn)槭敲嫦蛞苿?dòng)端的,所以這些常規(guī)的東東也要考慮下
源碼
Loading.vue
{{ text }}
index.js
重慶分公司
重慶分公司
import Loading from "./Loading.vue";
// 來保持實(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的傳遞沒有做增量合并(遞歸每個(gè)key賦值)，直接淺復(fù)制合并的對于組件功能的概而全，拓展性，大小需要自己權(quán)衡；
到這里，我們業(yè)務(wù)需要的一個(gè)小組件，該有的功能都有了。
以上所述是小編給大家介紹的基于Vue 實(shí)現(xiàn)一個(gè)中規(guī)中矩loading組件，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會(huì)及時(shí)回復(fù)大家的。在此也非常感謝大家對創(chuàng)新互聯(lián)網(wǎng)站的支持！
