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


Posted in Javascript onApril 03, 2019

前言

最近有一个新的项目,UI大佬不知道从哪里找来了一张GIF丢到蓝湖,说作为全局的页面loading ,但是自己想了想,还是选择画一个。

一开始想过用svg,canvas;最终还是选择了css3+js来实现这个效果;

gif的缺点挺多,至于为什么又排除了svg和canvas;

是因为css3+js可控性更强,不管是大小还是颜色,还是响应式(我的项目走的vh,vw)那套来适配;

可以借助打包插件,达到loading的大小适配;

效果

UI大佬提供的GIF

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

实现的效果【在线codesandbox预览】

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

  • 支持环的颜色改变及整个展示大小
  • 支持在loading底部显示文字并控制其样式

实现思路

这个东东主要用了这么几个要点来实现完整的效果;

  • flex和position来布局
  • 伪类的颜色继承(currentColor)
  • 边框结合圆角实现环
  • 用了transform和animation来实现了整个过渡

效果知道怎么实现了,剩下的就是我们需要实现的功能点了;

因为是面向移动端的,所以这些常规的东东也要考虑下

  • 遮罩层可控
  • 防止点击穿透滚动body
  • 组件支持函数方法调用

源码

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的滚动
  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组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
jquery中:input和input的区别分析
Jul 13 Javascript
用jquery和json从后台获得数据集的代码
Nov 07 Javascript
如何实现textarea里的不同文本显示不同颜色
Jan 20 Javascript
js取模(求余数)隔行变色
May 15 Javascript
JavaScript使用addEventListener添加事件监听用法实例
Jun 01 Javascript
jQuery实现类似老虎机滚动抽奖效果
Aug 06 Javascript
Ionic+AngularJS实现登录和注册带验证功能
Feb 09 Javascript
详解Vue 事件驱动和依赖追踪
Apr 22 Javascript
详解webpack babel的配置
Jan 09 Javascript
node 使用 async 控制并发的方法
May 07 Javascript
详解基于Node.js的HTTP/2 Server实践
May 31 Javascript
微信小程序网络请求封装示例
Jul 24 Javascript
javascript实现小型区块链功能
Apr 03 #Javascript
vue插槽slot的理解和使用方法
Apr 03 #Javascript
react写一个select组件的实现代码
Apr 03 #Javascript
vue框架下部署上线后刷新报404问题的解决方案(推荐)
Apr 03 #Javascript
JavaScript变速动画函数封装添加任意多个属性
Apr 03 #Javascript
JS中注入eval, Function等系统函数截获动态代码
Apr 03 #Javascript
性能优化篇之Webpack构建速度优化的建议
Apr 03 #Javascript
You might like
PHP分页显示制作详细讲解
2006/10/09 PHP
用php来检测proxy
2006/10/09 PHP
Optimizer与Debugger兼容性问题的解决方法
2008/12/01 PHP
php实现统计二进制中1的个数算法示例
2018/01/23 PHP
给Function做的OOP扩展
2009/05/07 Javascript
文本框获得焦点和失去焦点的判断代码
2012/03/18 Javascript
JavaScript操纵窗口的方法小结
2013/06/28 Javascript
原生javascript实现Tab选项卡切换功能
2015/01/12 Javascript
详解JavaScript的流程控制语句
2015/11/30 Javascript
jQuery Json数据格式排版高亮插件json-viewer.js使用方法详解
2017/06/12 jQuery
vue-cli脚手架-bulid下的配置文件
2018/03/27 Javascript
Vue中插入HTML代码的方法
2018/09/21 Javascript
vue 动态表单开发方法案例详解
2019/12/02 Javascript
es6数组之扩展运算符操作实例分析
2020/04/25 Javascript
JS猜数字游戏实例讲解
2020/06/30 Javascript
python写的一个文本编辑器
2014/01/23 Python
python冒泡排序简单实现方法
2015/07/09 Python
Python-嵌套列表list的全面解析
2016/06/08 Python
Python标准模块--ContextManager上下文管理器的具体用法
2017/11/27 Python
python逆向入门教程
2018/01/15 Python
Flask实现图片的上传、下载及展示示例代码
2018/08/03 Python
对pytorch网络层结构的数组化详解
2018/12/08 Python
Django基础三之视图函数的使用方法
2019/07/18 Python
详解opencv中画圆circle函数和椭圆ellipse函数
2019/12/27 Python
使用jupyter Nodebook查看函数或方法的参数以及使用情况
2020/04/14 Python
香港最新科技与优质家居产品购物网站:J SELECT
2018/08/21 全球购物
墨尔本复古时尚品牌:Dangerfield
2018/12/12 全球购物
Footshop法国:购买运动鞋
2020/01/19 全球购物
上海方立数码笔试题
2013/10/18 面试题
企业承诺书格式
2014/05/21 职场文书
七夕情人节促销方案
2014/06/07 职场文书
办公用房租赁协议书
2014/11/29 职场文书
2015年保送生自荐信
2015/03/24 职场文书
2015年清明节网上祭英烈活动总结
2015/03/26 职场文书
Pygame Rect区域位置的使用(图文)
2021/11/17 Python
python 使用tkinter与messagebox写界面和弹窗
2022/03/20 Python