基于基于Vue 实现一个中规中矩实现一个中规中矩loading组件组件
主要介绍了基于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
<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() {