前言

最近有一个新的项目，用户界面大佬不知道从哪里找来了一张GIF格式格式丢到蓝湖，说作为全局的页面装载，但是自己想了想，还是选择画一个。

一开始想过用svg，画布；最终还是选择了css3 js来实现这个效果；

可交换的图像格式的缺点挺多，至于为什么又排除了挽救(保存的简写)和帆布；

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

可以借助打包插件，达到装货的大小适配；

效果

用户界面大佬提供的GIF格式格式

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

支持环的颜色改变及整个展示大小支持在装货底部显示文字并控制其样式实现思路

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

弯曲和位置来布局伪类的颜色继承（当前颜色)边框结合圆角实现环用了改变和动画来实现了整个过渡效果知道怎么实现了，剩下的就是我们需要实现的功能点了；

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

遮罩层可控防止点击穿透滚动身体组件支持函数方法调用源码

Loading.vue

模板div id=' Loading-wrapper ' div class=' Loading-ring ' : style=' ring style ' div class=' outer '/div class=' middle '/div class=' inner '/div class=' text ' : style=' text style ' v-if=' text ' { text } }/div/template script导出默认{ name : ' Loading '，prop : { text 33: { type 333333: String，default: ' ' ' }} } }，方法： { preventDefault(e){//禁止身体的滚动控制台。日志(e)；e . PreventDefault()；e . stopperpagation()；} },已装入(){文档querySelector('body ').addEventListener('touchmove '，这个。prevent default)；},销毁了(){文档querySelector('body ').removeEventListener('touchmove '，这。prevent default)；}};/script style lang=' SCS '作用域#装载包装{位置： }已修复；左： 0；top : 0；高度： 100 VH宽度： 100大众；背景-color: rgba(0，0，0，0.25)；display : flex justice-内容中心：align-items:居中；弯曲方向：柱；加载环{相对位置：宽度： 200像素；高度： 200像素；外层。内心的。中间{位置：绝对值；左侧： 50%;前：名50%；transform: translate(-50%，-50%)；color : CurrentColor { content : }之后的：显示器：块；宽度： 100%;高度： 100%;边界半径： 100%;边框-左： 10px实心currentColorborder-right : 10px实心当前颜色边框-top: 10px实心当前颜色边框-bottom: 10px纯色透明；} } .外部{宽度： 100%;高度： 100%;{动画后： } 3:逆时针1.5s无限线性后；} } .内部{ width : calc(100% * 0.6)；高度： calc(100% * 0.6)；{动画后： } 3:逆时针1.5s无限线性后；} } .中间{ width : calc(100% * 0.8)；高度： calc(100% * 0.8)；后{ animation:顺时针1.5s无限线性；} } } .text { color : # ffffont-size : 14px；padding: 30px宽度： 250像素；文本对齐：中心；} } @关键帧顺时针{ 0% { transform : rotate(0)；} 100% { transform : rotate(360)；} } @关键帧逆时针{ 0% { transform : rotate(0)；} 100% { transform : rotate(-360)；}}/styleindex.js

从""导入加载/正在加载。vue '；//来保持实例，单例模式让实例；让埃尔；Loading.install=function(Vue，options={ }){ const DefaultOptions={ text : ' '，text style : { font size : ' 14px '，color: '#fff' }，ring style : { width : ' 100px '，height: '100px '，color: '#407af3' }，选项};vue。原型。$ loading={ show(options={ }){ if(！实例){让LoadingInstance=vue。扩展(加载)；El=文档。创建元素(' div ')；文件。尸体。阑尾(El)；实例=新加载实例({ propsData: { defaultOptions，选项} })。$ mount(El)；} else {返回实例；} }，hide(){ if(instance){ document。尸体。移除子文档。getelementbyid(' loading-wrapper ')；实例=未定义；} } };};导出默认加载；选项及用法

选项

text: { //这个不为空就在装货下面显示文字键入：字符串，默认值： '' }，textStyle: { //正在加载文本的样式，颜色及字体大小type: Object，默认： function(){ return { font size : ' 14px '，color : ' # fff ' }；} }，ringStyle: { //最外环的大小，内二环是比例换算的（百分比)type: Object，默认： function(){ return { width : ' 100px '，height: '100px '，color : ' # 407 af 3 ' }；} }用法

在主入口使用一下便可全局使用

除了常规的引入使用，还支持函数调用，挂载了一个$正在加载。

这个$正在加载。show({ text : ' loading '，text style : { font size : ' 18px '，color : ' # f00 ' })；让ST=SetTiME out(()={ clear time out(ST)；这个$正在加载。hide()；}, 1000);总结

小道具的传递没有做增量合并（递归每个键赋值),直接浅复制合并的对于组件功能的概而全，拓展性，大小需要自己权衡；

到这里，我们业务需要的一个小组件，该有的功能都有了。

以上所述是小编给大家介绍的基于某视频剪辑软件实现一个中规中矩装货组件，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对我们网站的支持！