wj-loading

当前为2.X文档。（查看1.X文档）

开箱即用的loading组件~~~

• 演示
• github

vue指令版本兼容vue2和vue3

• wj-loading-vue

安装

:version为对应版本号

• npm install wj-loading
• yarn add wj-loading
• <script src="https://cdn.jsdelivr.net/npm/wj-loading@:version/dist/wj-loading.umd.min.js"></script>
• <script src="https://unpkg.com/wj-loading@:version/wj-loading.umd.js"></script>

示例

HTML

<div id='loading'></div>

JS

// 引入样式
import 'wj-loading/dist/wj-loading.css'
import Loading from 'wj-loading'

new Loading.TextLoading({
  element: '#loading',
  background: 'rgba(255, 255, 255, .8)',
  immediate: true
})

公用

公用参数

| 参数名 | 默认值 | 必须 | 支持setOption | 数据类型 | 描述 | |:------------:|:------------------:|:--:|:-----------:|:-----------------------:|:------------------------------------------:| | element | document.body | 否 | 否 | string/HTMLElement/null | 容器节点(若为string，则使用document.querySelector查找) | | immediate | false | 否 | 否 | boolean | 立即执行 | | interval | - | 否 | 是 | number | 执行时间（毫秒） | | background | rgba(0, 0, 0, 0.2) | 否 | 是 | string | 背景 | | gaussianBlur | false | 否 | 是 | number / string | 高斯模糊 | | zIndex | 2000 | 否 | 是 | number | z-index | | afterRemove | - | 否 | 是 | () => void | 移除后回调 | | delayRemove | - | 否 | 是 | number | 延迟移除（毫秒） | | tipText | - | 否 | 是 | string | 底部提示文字 | | tipTextClass | - | 否 | 是 | string | 底部提示文字class |

公用方法

| 方法名 | 必须 | 参数 | 描述 | |:-----------------------------------------:|:-------------:|:-------------------------------------:|:--:| | loading(interval: number) | interval:否 | interval:执行时时间（毫秒） | 执行 | |remove(delayRemove: number): Promise | delayRemove:否 | delayRemove:延迟移除（毫秒） | 移除 | | setOption(option) | 设置参数:是 | option:请查看公用参数和动画对应的参数是否支持setOption方法 | 设置 |

BounceLoading

参数

| 参数名 | 默认值 | 必须 | 支持setOption | 数据类型 | 描述 | |:-----:|:----:|:--:|:-----------:|:------:|:--:| | color | #333 | 否 | 是 | string | 颜色 | | size | 20px | 否 | 是 | string | 尺寸 |

CircleLoaderLoading

参数

| 参数名 | 默认值 | 必须 | 支持setOption | 数据类型 | 描述 | |:-----:|:-------:|:--:|:-----------:|:------:|:--:| | color | #F44336 | 否 | 是 | string | 颜色 |

CmSpinnerLoading

参数

| 参数名 | 默认值 | 必须 | 支持setOption | 数据类型 | 描述 | |:-----:|:---------------------------------:|:--:|:-----------:|:---------------:|:--:| | color | ['#F15E41', '#BAD375', '#26A9E0'] | 否 | 是 | 长度为3的数组（string） | 颜色 | | size | 100px | 否 | 是 | string | 尺寸 |

CubesLoading

参数

| 参数名 | 默认值 | 必须 | 支持setOption | 数据类型 | 描述 | |:-----:|:----:|:--:|:-----------:|:------:|:--:| | color | #333 | 否 | 是 | string | 颜色 | | size | 20px | 否 | 是 | string | 尺寸 |

MeshLoaderLoading

不支持tipText、tipTextClass

参数

| 参数名 | 默认值 | 必须 | 支持setOption | 数据类型 | 描述 | |:-----:|:-------:|:--:|:-----------:|:------:|:--:| | color | #F44336 | 否 | 是 | string | 颜色 |

TextLoading

参数

| 参数名 | 默认值 | 必须 | 支持setOption | 数据类型 | 描述 | |:-----:|:----------:|:--:|:-----------:|:------:|:--:| | text | Loading... | 否 | 是 | string | 文字 | | color | #333 | 否 | 是 | string | 颜色 | | size | 16px | 否 | 是 | number | 尺寸 |

TripleSpinnerLoading

参数

| 参数名 | 默认值 | 必须 | 支持setOption | 数据类型 | 描述 | |:-----:|:---------------------------------:|:--:|:-----------:|:---------------:|:--:| | color | ['#FF5722', '#FF9800', '#FFC107'] | 否 | 是 | 长度为3的数组（string） | 颜色 | | size | 100px | 否 | 是 | number | 尺寸 |

DotJumpLoading

参数

| 参数名 | 默认值 | 必须 | 支持setOption | 数据类型 | 描述 | |:-----:|:----------------:|:--:|:-----------:|:---------------:|:--:| | color | ['#000', '#000'] | 否 | 是 | 长度为2的数组（string） | 颜色 |

JellyLoading

参数

| 参数名 | 默认值 | 必须 | 支持setOption | 数据类型 | 描述 | |:-------------:|:----:|:--:|:-----------:|:------:|:-----:| | color | #fff | 否 | 是 | string | 颜色 | | shadowColor | #000 | 否 | 是 | string | 阴影颜色 | | shadowOpacity | 0.1 | 否 | 是 | string | 阴影透明度 |

WaveLoading

不支持tipText、tipTextClass

参数

| 参数名 | 默认值 | 必须 | 支持setOption | 数据类型 | 描述 | |:-----:|:----:|:--:|:-----------:|:------:|:--:| | color | #000 | 否 | 是 | string | 颜色 |

DotExpandLoading

参数

| 参数名 | 默认值 | 必须 | 支持setOption | 数据类型 | 描述 | |:-----:|:----:|:--:|:-----------:|:------:|:--:| | color | #000 | 否 | 是 | string | 颜色 |

WaveValueLoading

参数

| 参数名 | 默认值 | 必须 | 支持setOption | 数据类型 | 描述 | |:-----------:|:-------:|:--:|:-----------:|:------:|:----------:| | color | #76DAFF | 否 | 是 | string | 颜色 | | size | 100 | 否 | 是 | number | 尺寸 | | value | 0 | 否 | 是 | number | 进度值(0-100) | | fontSize | 20px | 否 | 是 | string | 字体大小 | | fontColor | #000 | 否 | 是 | string | 字体颜色 | | fontWeight | normal | 否 | 是 | string | 字体粗细 | | borderSize | 2 | 否 | 是 | string | 边框尺寸 | | paddingSize | 2 | 否 | 是 | string | 空隙尺寸 |

方法

| 方法名 | 必须 | 参数 | 描述 | |:-----------------------:|:-------:|:----------------:|:-----:| | setValue(value: number) | value:否 | value:进度值(0-100) | 设置进度值 |

TextFillLoading

参数

| 参数名 | 默认值 | 必须 | 支持setOption | 数据类型 | 描述 | |:---------:|:--------:|:--:|:-----------:|:------:|:-------------------------:| | text | Loading | 否 | 是 | string | 文字 | | color | #FFF | 否 | 是 | string | 文字颜色 | | fillColor | #76DAFF | 否 | 是 | string | 填充颜色 | | size | 40px | 否 | 是 | string | 文字大小 | | direction | vertical | 否 | 是 | string | 方向(horizontal / vertical) |