web-loading 的详细配置

源码

Github传送

文档

文档传送

使用

import type { LoadingType } from "web-loading";
import { initLoading } from 'web-loading'
let webLoading:LoadingType = initLoading({})
console.log(webLoading)

LoadingType：loading(启动动画)、resize(重新计算并绘制loading大小)、close(关闭loading。)、update(动态绘制model，不能动态修改公共配置。)、getOptions（获取当前options配置。）、getLoadingId（获取 loadingId。）。

options配置

options分为公共配置以及model配置，公共配置就是无论你使用哪个model，都能修改的属性，model配置是不同model动画具有私有的不同配置。

公共配置

属性	类型	默认值	备注
html?:	string	''	html加载方式(优先级大于custom)
custom?:	typeof BaseModel 或 null	null	自定义model(优先级大于model)
type?:	LOADING_TYPES	LOADING_TYPES.DOM	启动方式
extendClass?:	string 或 null 或 undefined	extend	启动方式为MINI或FILL时的class
model?:	MODEL_TYPES	MODEL_TYPES.RING	model模块
text?:	string	加载中...	字体内容
textGap?:	number	8	字体间距
fontSize?:	number	12	字体大小
fontFamily?:	string	Microsoft YaHei	字体类型
delay?:	number	65	动画延迟
delayInto?:	number	320	进入/关闭 动画延迟
notFeel	number	0	无感刷新(300：300毫秒以内调用close不绘制loading)
optimization?:	boolean	false	优化处理（暂不支持）
zIndex?:	string	2001	loading层级
themeColor?:	string	rgba(64,158,255,1)	主题色
bgColor?:	string	rgba(0, 0, 0, 0.8)	背景色
shadowColor?:	string	rgba(64,158,255,0.6)	阴影色
shadowOffsetX?:	number	2	阴影X
shadowOffsetY?:	number	2	阴影Y
shadowBlur?:	number	5	阴影范围
pointerEvents?:	boolean	false	事件穿透(DOM方式)
toast?:	boolean	true	是否显示提示

这里注意显示优先级: model(默认model加载)<custom(自定义的model)<html(兼容的html+css方式加载)

model配置

model配置传送

具体配置以及使用方式请参考文档。