基于Vue 实现一个中规中矩loading组件

前言

最近有一个新的项目，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组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持！