源码
文档
简述
在开发简单的前端项目时，确实我们
loading需求不是很大，使用常见UI框架都会有自带loading功能，如果实在有自定义方面的需求可以使用html+css完全是可以实现的，偷点懒也可以找设计要一个SVG或者GIF动态图片。但这些
loading方式都会有利弊，当我在多个不同的数据大屏项目中，领导还需要显示特殊并不同的loading时，就显得很繁琐，需要在loading封装上下功夫，还得各种特效，因为loading是全局的，可能还会影响到其他的DOM元素，于是为了方便与自己写了这个web-loading这个插件，它默认实现了许多model加载方式，并且兼容了html+css的方式显示动画，这样每次数据大屏项目中需要用到特殊的loading时只需要canvas绘制这一层就行，无需担心封装的问题，插件还可以选择是全局显示还是范围显示等等。
安装
根据自己的包管理工具下载。
npm install web-loading
#使用
#CDN引入
<script src="https://cdn.jsdelivr.net/npm/web-loading"></script>
#工程项目引入
import type { LoadingType } from "web-loading";
import { initLoading } from "web-loading";
let webLoading: LoadingType = initLoading({
// 自定义options
})
参数
options?:OptionsType返回
webLoading:LoadingType
#获取元素
// 无框架情况
let dom = document.querySelector('xxx')
// vue
let dom = ref()
// ...如果是FULL或MINI不需要获取元素
#启动
// 注意:在dom加载完成后在调用loading
window.onload = function () {
webLoading.loading(dom)
}
参数
dom:挂载的HtmlElement元素options?:OptionsType，支持覆盖options。
#启动方式
DOM、FULL、MINI三种启动方式都需要基于HtmlElement，这里FULL、MINI是扩展的启动方式，参数中无须提供HtemlElment，是因为WebLoading已经处理的元素的创建到消失的流程。
import type { LoadingType } from "web-loading";
import { fullLoading,miniLoading LOADING_TYPES } from "web-loading";
let webLoading: LoadingType = fullLoading() // 全屏
// let webLoading: LoadingType = miniLoading() // 移动端
// 启动(如果是MINI或者FULL无需传递dom)
webLoading.loading()
