前言
最近有一个新的项目,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" :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组件,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对小牛知识库网站的支持!
本文向大家介绍基于vue+element实现全局loading过程详解,包括了基于vue+element实现全局loading过程详解的使用技巧和注意事项,需要的朋友参考一下 项目中使用的是vue+element实现的全局loading 1.引入所需组件,这里主要就是router和element组件,element组件引入可以参考element官网 2.下面就是重点及代码实现了 首先是全局的一个变
本文向大家介绍使用高阶组件(HOC)实现一个loading组件相关面试题,主要包含被问及使用高阶组件(HOC)实现一个loading组件时的应答技巧和注意事项,需要的朋友参考一下
本文向大家介绍一起写一个即插即用的Vue Loading插件实现,包括了一起写一个即插即用的Vue Loading插件实现的使用技巧和注意事项,需要的朋友参考一下 无论最终要实现怎样的网站,Loading状态都是必不可少的一环,给用户一个过渡喘息的机会也给服务器一个递达响应的时间。 从使用方式说起 不管从0开始写起还是直接下载的Loading插件,都会抽象为一个组件,在用到的时候进行加载Loadi
本文向大家介绍基于vue实现swipe轮播组件实例代码,包括了基于vue实现swipe轮播组件实例代码的使用技巧和注意事项,需要的朋友参考一下 项目背景 图片轮播是前端项目必有项,当前有很多效果很酷炫的轮播插件,例如Swiper。 但是当项目中的图片轮播只需要一个很简单的轮播样式,比如这样的 我们引用这样一个110k的大插件,就大材小用了。再安利一下,swiper2.x和swiper3.x对移动和
本文向大家介绍基于javascript实现页面加载loading效果,包括了基于javascript实现页面加载loading效果的使用技巧和注意事项,需要的朋友参考一下 本文实为大家分享了javascript实现页面加载loading效果,供大家参考,具体内容如下 效果图: 以上就是本文的全部内容,希望对大家学习javascript程序设计有所帮助。
本文向大家介绍基于vue实现一个禅道主页拖拽效果,包括了基于vue实现一个禅道主页拖拽效果的使用技巧和注意事项,需要的朋友参考一下 效果图如下所示: 源码地址 bb两句 最近在做一个基于vue的后台管理项目。平时项目进度统计就在上禅道上进行。so~ 然后领导就感觉这个拖拽效果还行,能不能加到咱们项目里面。 既然领导发话,那就开干。。 所有技术:vue + vuedraggable 拖动的实现基于