前言
创新互联专注于长汀企业网站建设,自适应网站建设,电子商务商城网站建设。长汀网站建设公司,为长汀等地区提供建站服务。全流程按需设计，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务
最近有一个新的项目，UI大佬不知道从哪里找来了一张GIF丢到蓝湖，说作为全局的页面loading ，但是自己想了想，还是选择画一个。
一开始想过用svg,canvas;最终还是选择了css3+js来实现这个效果；
gif的缺点挺多,至于为什么又排除了svg和canvas；
是因为css3+js可控性更强，不管是大小还是颜色，还是响应式(我的项目走的vh,vw)那套来适配；
可以借助打包插件，达到loading的大小适配;
效果
UI大佬提供的GIF
实现的效果【在线codesandbox预览】
- 支持环的颜色改变及整个展示大小
- 支持在loading底部显示文字并控制其样式
实现思路
这个东东主要用了这么几个要点来实现完整的效果；
- flex和position来布局
- 伪类的颜色继承(currentColor)
- 边框结合圆角实现环
- 用了transform和animation来实现了整个过渡
效果知道怎么实现了，剩下的就是我们需要实现的功能点了；
因为是面向移动端的,所以这些常规的东东也要考虑下
- 遮罩层可控
- 防止点击穿透滚动body
- 组件支持函数方法调用
源码
Loading.vue
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组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对创新互联网站的支持！
分享文章：基于Vue实现一个中规中矩loading组件
当前网址：
http://cdkjz.cn/article/pojisj.html
