教您自定义一个 web-loading 的 model 加载

源码

Github传送

文档

文档传送

自定义

看文档我们知道web-loading是可以通过custom属性自定义model的，并是通过canvas绘制动画的方式去自定义model。

// 引入基础的Model类
import { BaseModel, ElementType, OptionsType } from "web-loading";
​
export class CustomLoading extends BaseModel<OptionsType> {
  size: number = 5;
  constructor(w: number, h: number, canvas: HTMLCanvasElement, options: Required<OptionsType>, element: ElementType) {
    super(w, h, canvas, options, element);
    // 根据周期调用
    this.run(this.draw);
  }
  draw() {
    // 清空画布
    this.clearRect();
    this.ctx.fillRect(-this.size / 2, -this.size / 2, this.size, this.size);
  }
}

引入BaseModel基础Model类，会继承相应绘制的API,这是一个非常简单的自定义model例子，它没有私有的model配置，并在画布中绘制了一个矩形。

如果项目中需要对model进行特殊的参数配置，只需要将BaseModel<OptionsType>继承的OptionsType类型继承并替换即可，具体看这里。

如果你的html项目原生项目并使用CDN方式引入，那更方便了，web-loading以及将BaseModel以及其他需要使用的API都抛在window中，直接使用即可。

使用

封装好自定义中的canvas部分后，我们只需要使用的时候在options中配置custom即可。

import type {  OptionsType } from "web-loading";
import {BaseModel, fullLoading} from "web-loading";
​
export function initLoading() {
    const options: OptionsType = {
        custom: CustomLoading as typeof BaseModel,
    };
    return fullLoading(options);
}

这里我是引入了fullLoading，全屏显示，并返回LoadingType类型对象，使用时loading就无需传递DOM元素。