import{_ as p,M as c,p as l,q as d,Q as n,t as s,N as t,V as e,a1 as o}from"./framework-2d0bbdc3.js";const i={},u=n("h1",{id:"使用",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#使用","aria-hidden":"true"},"#"),s(" 使用")],-1),r=o(`<h2 id="webloading" tabindex="-1"><a class="header-anchor" href="#webloading" aria-hidden="true">#</a> <code>WebLoading</code></h2><blockquote><p>无论是<code>DOM</code>还是<code>FULL</code>、<code>MINI</code>最终都会走<code>WebLoading</code>。</p></blockquote><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> LoadingType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;web-loading/src/types.d&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> initLoading <span class="token keyword">from</span> <span class="token string">&#39;web-loading/src/loading&#39;</span>
<span class="token keyword">let</span> webLoading<span class="token operator">:</span>LoadingType <span class="token operator">=</span> <span class="token function">initLoading</span><span class="token punctuation">(</span><span class="token punctuation">{</span><span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span>webLoading<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p><code>LoadingType</code>：<code>loading</code>、<code>resize</code>、<code>close</code>、<code>update</code>、<code>getOptions</code>、<code>getLoadingId</code>。</p></blockquote><h3 id="loading" tabindex="-1"><a class="header-anchor" href="#loading" aria-hidden="true">#</a> loading</h3><blockquote><p>启动动画<code>loading</code>。</p></blockquote><ul><li><p>参数：</p><ul><li><code>dom:HTMLElement</code></li><li><code>options?:OptionsType</code></li></ul></li><li><p>返回：void</p></li></ul><blockquote><p>调用<code>loading</code>函数，会先检查<code>loadingId</code>是否存在(是否还在绘制)，只有无绘制状态才会启动。</p><p><code>loading</code>参数2，可以覆盖初始化<code>initLoading</code>的<code>options</code>。</p></blockquote><h3 id="resize" tabindex="-1"><a class="header-anchor" href="#resize" aria-hidden="true">#</a> resize</h3><blockquote><p>重新计算并绘制<code>loading</code>大小。</p></blockquote><ul><li>参数：无</li><li>返回：void</li></ul><blockquote><p><code>resize</code>会从绑定的<code>HtmlElement</code>中重新获取大小并重新绘制，此函数不会重新实例<code>WebLoading</code>与<code>loading</code>业务场景不同，例如<code>window.addEventListener(&#39;resize&#39;, loading.resize)</code>可能会使用到。</p></blockquote><h3 id="close" tabindex="-1"><a class="header-anchor" href="#close" aria-hidden="true">#</a> close</h3><blockquote><p>关闭<code>loading。</code></p></blockquote><ul><li>参数：无</li><li>返回：void</li></ul><blockquote><p><code>close</code>首先会清空所有<code>WebLoading</code>的<code>store</code>以及其他记录，并停止<code>requestAnimationFrame</code>调用，最后根据<code>delayInto</code>清除相关元素，关闭过程中<code>WebLoading</code>会使用<code>hookCall</code>触发<code>hook</code>关闭<strong>钩子函数</strong>(<code>BEFORE_COLSE</code>:关闭前，<code>COLSED</code>：关闭后，也就是清除元素后)，以便于绘制<strong>model</strong>。</p></blockquote><h3 id="update" tabindex="-1"><a class="header-anchor" href="#update" aria-hidden="true">#</a> update</h3><blockquote><p>动态绘制<code>model</code>，不能动态修改<a href="#%E5%85%AC%E5%85%B1">公共配置</a>。</p></blockquote><ul><li>参数： <ul><li><code>options?:OptionsType</code></li></ul></li><li>返回：void</li></ul><blockquote><p><code>update</code>函数不会重新实例<code>WebLoading</code>，并通过参数<code>options</code>重新绘制<code>model</code>。业务场景与<code>loading</code>类似，但<code>loading</code>每次都会初始化<code>WebLoading</code>，只有每次关闭才能实现相应业务，所以在动态绘制<code>model</code>业务场景下推荐使用<code>update</code>。</p></blockquote><h3 id="getoptions" tabindex="-1"><a class="header-anchor" href="#getoptions" aria-hidden="true">#</a> getOptions</h3><blockquote><p>获取当前options配置。</p></blockquote><ul><li><p>参数：无</p></li><li><p>返回：</p><ul><li><code>options:OptionsType</code></li></ul></li></ul><h3 id="getloadingid" tabindex="-1"><a class="header-anchor" href="#getloadingid" aria-hidden="true">#</a> getLoadingId</h3><blockquote><p>获取 <code>loadingId</code>。</p></blockquote><ul><li><p>参数：无</p></li><li><p>返回：</p><ul><li><code>loadingId:string | null</code></li></ul></li></ul><blockquote><p><code>loadingId</code>在初始化会赋值，<code>close</code>关闭后会赋值为<code>null</code>，因此，如果<code>loadingId</code>为<code>null</code>当前无绘制状态，否则相反。</p></blockquote><h2 id="options" tabindex="-1"><a class="header-anchor" href="#options" aria-hidden="true">#</a> options</h2><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">MODEL_TYPES</span> <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;web-loading/src/utils&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> initLoading <span class="token keyword">from</span> <span class="token string">&#39;web-loading/src/loading&#39;</span>
<span class="token keyword">let</span> webLoading <span class="token operator">=</span> <span class="token function">initLoading</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    model<span class="token operator">:</span><span class="token constant">MODEL_TYPES</span><span class="token punctuation">.</span><span class="token constant">GEAR</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="公共" tabindex="-1"><a class="header-anchor" href="#公共" aria-hidden="true">#</a> 公共</h3><table><thead><tr><th>属性</th><th>类型</th><th>默认值</th><th>备注</th></tr></thead><tbody><tr><td><code>html?:</code></td><td><code>string</code></td><td><code>&#39;&#39;</code></td><td><strong>html</strong>加载方式(<strong>优先级大于custom</strong>)</td></tr><tr><td><code>custom?:</code></td><td><code>typeof BaseModel 或 null</code></td><td><code>null</code></td><td>自定义<strong>model</strong>(<strong>优先级大于model</strong>)</td></tr><tr><td><code>type?:</code></td><td><code>LOADING_TYPES</code></td><td><code>LOADING_TYPES.DOM</code></td><td>启动方式</td></tr><tr><td><code>miniClass?:</code></td><td><code>string 或 null 或 undefined</code></td><td><code>mini</code></td><td>启动方式为<strong>MINI</strong>时的<strong>class</strong></td></tr><tr><td><code>model?:</code></td><td><code>MODEL_TYPES</code></td><td><code>MODEL_TYPES.RING</code></td><td>model模块</td></tr><tr><td><code>text?:</code></td><td><code>string</code></td><td><code>加载中...</code></td><td>字体内容</td></tr><tr><td><code>textGap?:</code></td><td><code>number</code></td><td><code>8</code></td><td>字体间距</td></tr><tr><td><code>fontSize?:</code></td><td><code>number</code></td><td><code>12</code></td><td>字体大小</td></tr><tr><td><code>fontFamily?:</code></td><td><code>string</code></td><td><code>Microsoft YaHei</code></td><td>字体类型</td></tr><tr><td><code>delay?:</code></td><td><code>number</code></td><td><code>65</code></td><td>动画延迟</td></tr><tr><td><code>delayInto?:</code></td><td><code>number</code></td><td><code>520</code></td><td>进入/关闭 动画延迟</td></tr><tr><td><code>optimization?:</code></td><td><code>boolean</code></td><td><code>false</code></td><td>优化处理（暂不支持）</td></tr><tr><td><code>zIndex?:</code></td><td><code>string</code></td><td><code>2001</code></td><td>loading层级</td></tr><tr><td><code>themeColor?:</code></td><td><code>string</code></td><td><code>rgba(64,158,255,1)</code></td><td>主题色</td></tr><tr><td><code>bgColor?:</code></td><td><code>string</code></td><td><code>rgba(0, 0, 0, 0.8)</code></td><td>背景色</td></tr><tr><td><code>shadowColor?:</code></td><td><code>string</code></td><td><code>rgba(64,158,255,0.6)</code></td><td>阴影色</td></tr><tr><td><code>shadowOffsetX?:</code></td><td><code>number</code></td><td><code>2</code></td><td>阴影X</td></tr><tr><td><code>shadowOffsetY?:</code></td><td><code>number</code></td><td><code>2</code></td><td>阴影Y</td></tr><tr><td><code>shadowBlur?:</code></td><td><code>number</code></td><td><code>5</code></td><td>阴影范围</td></tr><tr><td><code>pointerEvents?:</code></td><td><code>boolean</code></td><td><code>false</code></td><td>事件穿透(<strong>DOM</strong>方式)</td></tr><tr><td><code>toast?:</code></td><td><code>boolean</code></td><td><code>true</code></td><td>是否显示提示</td></tr></tbody></table><ul><li>LOADING_TYPES</li></ul><table><thead><tr><th>属性</th><th>枚举值</th><th>备注</th></tr></thead><tbody><tr><td>DOM</td><td><code>dom</code></td><td>元素</td></tr><tr><td>FULL</td><td><code>full</code></td><td>全屏</td></tr><tr><td>MINI</td><td><code>mini</code></td><td>移动端</td></tr></tbody></table><ul><li>MODEL_TYPES</li></ul>`,34),k=n("h3",{id:"model",tabindex:"-1"},[n("a",{class:"header-anchor",href:"#model","aria-hidden":"true"},"#"),s(" model")],-1),m=o(`<h2 id="custom自定义model" tabindex="-1"><a class="header-anchor" href="#custom自定义model" aria-hidden="true">#</a> custom自定义model</h2><h3 id="typescript项目例子" tabindex="-1"><a class="header-anchor" href="#typescript项目例子" aria-hidden="true">#</a> TypeScript项目例子</h3><ul><li>自定义</li></ul><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> OptionsType<span class="token punctuation">,</span> LimitType<span class="token punctuation">,</span> ElementType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;web-loading/src/types.d&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> BaseModel <span class="token keyword">from</span> <span class="token string">&quot;web-loading/src/draw/model/BaseModel&quot;</span><span class="token punctuation">;</span>
<span class="token comment">// 1?.如果model中options需要自定义参数，定义options类型</span>
<span class="token keyword">interface</span> <span class="token class-name">CustomOptionsType</span> <span class="token keyword">extends</span> <span class="token class-name">OptionsType</span> <span class="token punctuation">{</span>
  size<span class="token operator">?</span><span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">;</span>
<span class="token punctuation">}</span>
<span class="token comment">// 2?.自定义model默认参数(如果无需自定义options参数，使用OptionsType即可)</span>
<span class="token comment">// 2.1?. 定义默认值</span>
<span class="token keyword">let</span> modelDefOptions<span class="token operator">:</span> CustomOptionsType <span class="token operator">=</span> <span class="token punctuation">{</span>
  size<span class="token operator">:</span> <span class="token number">10</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token comment">// 2.2?.限制值的大小</span>
<span class="token keyword">let</span> limits<span class="token operator">:</span> <span class="token builtin">Array</span><span class="token operator">&lt;</span>LimitType<span class="token operator">&gt;</span> <span class="token operator">=</span> <span class="token punctuation">[</span>
  <span class="token punctuation">{</span>
    key<span class="token operator">:</span> <span class="token string">&quot;size&quot;</span><span class="token punctuation">,</span>
    message<span class="token operator">:</span> <span class="token string">&quot;key &lt; 100&quot;</span><span class="token punctuation">,</span>
    <span class="token function-variable function">limit</span><span class="token operator">:</span> <span class="token punctuation">(</span>key<span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
      <span class="token keyword">return</span> key <span class="token operator">&lt;</span> <span class="token number">100</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">,</span>
  <span class="token punctuation">}</span><span class="token punctuation">,</span>
<span class="token punctuation">]</span><span class="token punctuation">;</span>
<span class="token comment">// 3.自定义model类</span>
<span class="token keyword">class</span> <span class="token class-name">CustomLoading</span> <span class="token keyword">extends</span> <span class="token class-name">BaseModel<span class="token operator">&lt;</span>CustomOptionsType<span class="token operator">&gt;</span></span> <span class="token punctuation">{</span>
  <span class="token function">constructor</span><span class="token punctuation">(</span>w<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> h<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> canvas<span class="token operator">:</span> HTMLCanvasElement<span class="token punctuation">,</span> options<span class="token operator">:</span> Required<span class="token operator">&lt;</span>CustomOptionsType<span class="token operator">&gt;</span><span class="token punctuation">,</span> element<span class="token operator">:</span> ElementType<span class="token punctuation">)</span> <span class="token punctuation">{</span>
   <span class="token keyword">super</span><span class="token punctuation">(</span>w<span class="token punctuation">,</span> h<span class="token punctuation">,</span> canvas<span class="token punctuation">,</span> options<span class="token punctuation">,</span> element<span class="token punctuation">,</span> modelDefOptions<span class="token punctuation">,</span> limits<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token function">modelDefCall</span><span class="token punctuation">(</span>model<span class="token punctuation">)</span> <span class="token punctuation">{</span>
      <span class="token comment">// BaseModel初始化成功回调(可以自己做一些格外的初始化操作)</span>
      <span class="token comment">// model 是CustomLoading本身，这里初始化默认画笔fill为红色</span>
      model<span class="token punctuation">.</span>ctx<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> <span class="token string">&quot;red&quot;</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token comment">// 根据周期调用</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>draw<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
  <span class="token function">draw</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
    <span class="token comment">// 清空画布</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">clearRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token keyword">let</span> op <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">;</span>
    <span class="token comment">// 绘制(这里获取配置的自定义options参数)</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span><span class="token function">fillRect</span><span class="token punctuation">(</span><span class="token operator">-</span>op<span class="token punctuation">.</span>size <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token operator">-</span>op<span class="token punctuation">.</span>size <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> op<span class="token punctuation">.</span>size<span class="token punctuation">,</span> op<span class="token punctuation">.</span>size<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>这里简单自定义绘制了一个矩形</p><ul><li><code>BaseModel</code>是自定义继承类，如果是全局引入情况下，<code>window</code>中挂载<code>BaseModel</code>属性的。</li><li>注意:<code>modelDefOptions</code>、<code>limits</code>、<code>modelDefCall</code>不是必填参数</li><li>这里如果自定义的<strong>model</strong>无需<code>options</code>参数，可以省略<strong>1、2</strong>步骤。</li></ul></blockquote><ul><li>loading</li></ul><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">import</span> <span class="token punctuation">{</span> LoadingType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&quot;web-loading/src/types.d&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">import</span> initLoading <span class="token keyword">from</span> <span class="token string">&quot;web-loading/src/loading&quot;</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> dom <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&quot;xxx&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token comment">// 配置参数</span>
<span class="token keyword">let</span> options<span class="token operator">:</span> CustomOptionsType <span class="token operator">=</span> <span class="token punctuation">{</span>
  custom<span class="token operator">:</span> CustomLoading <span class="token keyword">as</span> <span class="token keyword">typeof</span> BaseModel<span class="token punctuation">,</span>
  size<span class="token operator">:</span> <span class="token number">20</span><span class="token punctuation">,</span>
<span class="token punctuation">}</span><span class="token punctuation">;</span>
<span class="token keyword">let</span> webLoading<span class="token operator">:</span> LoadingType <span class="token operator">=</span> <span class="token function">initLoading</span><span class="token punctuation">(</span>options<span class="token punctuation">)</span><span class="token punctuation">;</span>
webLoading<span class="token punctuation">.</span><span class="token function">loading</span><span class="token punctuation">(</span>dom<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="原生html项目例子" tabindex="-1"><a class="header-anchor" href="#原生html项目例子" aria-hidden="true">#</a> 原生html项目例子</h3><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><span class="token doctype"><span class="token punctuation">&lt;!</span><span class="token doctype-tag">DOCTYPE</span> <span class="token name">html</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>html</span> <span class="token attr-name">lang</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>en<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>head</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">charset</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>UTF-8<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>meta</span> <span class="token attr-name">name</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>viewport<span class="token punctuation">&quot;</span></span> <span class="token attr-name">content</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>width=device-width, initial-scale=1.0<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>title</span><span class="token punctuation">&gt;</span></span>web-loading<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>title</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>head</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>https://cdn.jsdelivr.net/npm/web-loading<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token script"></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>body</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">id</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>app<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>item<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
          id:
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>value<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>001<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span><span class="token punctuation">&gt;</span></span>
          user:
          <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>span</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>value<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>use1<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>span</span><span class="token punctuation">&gt;</span></span>
        <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
      <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
    <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>script</span><span class="token punctuation">&gt;</span></span><span class="token script"><span class="token language-javascript">
      window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
        <span class="token comment">// encapsulation</span>
        <span class="token keyword">let</span> modelDefOptions <span class="token operator">=</span> <span class="token punctuation">{</span>
          <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token number">10</span>
        <span class="token punctuation">}</span>
        <span class="token keyword">let</span> limits <span class="token operator">=</span> <span class="token punctuation">[</span>
          <span class="token punctuation">{</span>
            <span class="token literal-property property">key</span><span class="token operator">:</span> <span class="token string">&#39;size&#39;</span><span class="token punctuation">,</span>
            <span class="token literal-property property">message</span><span class="token operator">:</span> <span class="token string">&#39;key &lt; 100&#39;</span><span class="token punctuation">,</span>
            <span class="token function-variable function">limit</span><span class="token operator">:</span> <span class="token punctuation">(</span><span class="token parameter">key</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
              <span class="token keyword">return</span> key <span class="token operator">&lt;</span> <span class="token number">100</span>
            <span class="token punctuation">}</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">]</span>
        <span class="token keyword">class</span> <span class="token class-name">CustomLoading</span> <span class="token keyword">extends</span> <span class="token class-name">BaseModel</span> <span class="token punctuation">{</span>
          <span class="token function">constructor</span><span class="token punctuation">(</span><span class="token parameter">w<span class="token punctuation">,</span> h<span class="token punctuation">,</span> canvas<span class="token punctuation">,</span> options<span class="token punctuation">,</span> store</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">super</span><span class="token punctuation">(</span>w<span class="token punctuation">,</span> h<span class="token punctuation">,</span> canvas<span class="token punctuation">,</span> options<span class="token punctuation">,</span> store<span class="token punctuation">,</span> modelDefOptions<span class="token punctuation">,</span> <span class="token keyword">function</span> <span class="token function">modelDefCall</span><span class="token punctuation">(</span><span class="token parameter">model</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
              model<span class="token punctuation">.</span>ctx<span class="token punctuation">.</span>fillStyle <span class="token operator">=</span> <span class="token string">&#39;red&#39;</span>
            <span class="token punctuation">}</span><span class="token punctuation">)</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>draw<span class="token punctuation">)</span>
          <span class="token punctuation">}</span>
          <span class="token function">draw</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
            <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">clearRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
            <span class="token keyword">let</span> op <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>options
            <span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span><span class="token function">fillRect</span><span class="token punctuation">(</span><span class="token operator">-</span>op<span class="token punctuation">.</span>size <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> <span class="token operator">-</span>op<span class="token punctuation">.</span>size <span class="token operator">/</span> <span class="token number">2</span><span class="token punctuation">,</span> op<span class="token punctuation">.</span>size<span class="token punctuation">,</span> op<span class="token punctuation">.</span>size<span class="token punctuation">)</span>
          <span class="token punctuation">}</span>
        <span class="token punctuation">}</span>
        <span class="token comment">// loading</span>
        <span class="token keyword">let</span> docApp <span class="token operator">=</span> document<span class="token punctuation">.</span><span class="token function">querySelector</span><span class="token punctuation">(</span><span class="token string">&#39;#app&#39;</span><span class="token punctuation">)</span>
        <span class="token keyword">const</span> webLoading <span class="token operator">=</span> <span class="token function">initLoading</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
          <span class="token literal-property property">custom</span><span class="token operator">:</span> CustomLoading<span class="token punctuation">,</span>
          <span class="token literal-property property">size</span><span class="token operator">:</span> <span class="token number">20</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span>
        window<span class="token punctuation">.</span><span class="token function">addEventListener</span><span class="token punctuation">(</span><span class="token string">&#39;resize&#39;</span><span class="token punctuation">,</span> webLoading<span class="token punctuation">.</span>resize<span class="token punctuation">)</span>
        webLoading<span class="token punctuation">.</span><span class="token function">loading</span><span class="token punctuation">(</span>docApp<span class="token punctuation">)</span>
        <span class="token function">setTimeout</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
          webLoading<span class="token punctuation">.</span><span class="token function">close</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
        <span class="token punctuation">}</span><span class="token punctuation">,</span> <span class="token number">1500</span><span class="token punctuation">)</span>
      <span class="token punctuation">}</span>
    </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>script</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>body</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>style</span><span class="token punctuation">&gt;</span></span><span class="token style"><span class="token language-css">
    <span class="token selector">#app</span> <span class="token punctuation">{</span>
      <span class="token property">margin</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
      <span class="token property">padding</span><span class="token punctuation">:</span> 12px<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
      <span class="token property">border</span><span class="token punctuation">:</span> 1px solid gray<span class="token punctuation">;</span>
      <span class="token property">overflow</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
      <span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">#app .item</span> <span class="token punctuation">{</span>
      <span class="token property">display</span><span class="token punctuation">:</span> flex<span class="token punctuation">;</span>
      <span class="token property">flex-direction</span><span class="token punctuation">:</span> column<span class="token punctuation">;</span>
      <span class="token property">border</span><span class="token punctuation">:</span> 1px solid gray<span class="token punctuation">;</span>
      <span class="token property">border-radius</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
      <span class="token property">padding</span><span class="token punctuation">:</span> 10px<span class="token punctuation">;</span>
      <span class="token property">line-height</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
      <span class="token property">margin-bottom</span><span class="token punctuation">:</span> 6px<span class="token punctuation">;</span>
      <span class="token property">height</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token selector">#app .item .value</span> <span class="token punctuation">{</span>
      <span class="token property">display</span><span class="token punctuation">:</span> inline-block<span class="token punctuation">;</span>
      <span class="token property">min-width</span><span class="token punctuation">:</span> 31px<span class="token punctuation">;</span>
      <span class="token property">min-height</span><span class="token punctuation">:</span> 16px<span class="token punctuation">;</span>
      <span class="token property">font-weight</span><span class="token punctuation">:</span> bold<span class="token punctuation">;</span>
      <span class="token property">color</span><span class="token punctuation">:</span> <span class="token function">rgb</span><span class="token punctuation">(</span>64<span class="token punctuation">,</span> 158<span class="token punctuation">,</span> 255<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
  </span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>style</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>html</span><span class="token punctuation">&gt;</span></span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="_1、basemodel参数" tabindex="-1"><a class="header-anchor" href="#_1、basemodel参数" aria-hidden="true">#</a> 1、<code>BaseModel</code>参数</h3><blockquote><p><code>WebLoading</code>调用<code>custom</code>的时候会自动注入相关参数。</p></blockquote><table><thead><tr><th>参数</th><th>类型</th><th>备注</th></tr></thead><tbody><tr><td><code>w</code></td><td><code>number</code></td><td>画布宽度</td></tr><tr><td><code>h</code></td><td><code>number</code></td><td>画布高度</td></tr><tr><td><code>canvas</code></td><td><code>HTMLCanvasElement</code></td><td>画布元素，<code>BaseModel</code>默认以及获取了<code>2d</code>的上下文，但您还可以根据画布元素获取其他上下文</td></tr><tr><td><code>options</code></td><td><code>Required&lt;CustomOptionsType&gt;</code></td><td><code>options</code>是调节<strong>model</strong>参数，分为有<strong>公共</strong>参数与<strong>model</strong>参数最终会合并，<code>Required</code>标注你的参数不为空(已经初始值)</td></tr><tr><td><code>element</code></td><td><a href="#elementtype"><code>ElementType</code></a></td><td>容器元素</td></tr><tr><td><code>modelDefOptions?:</code></td><td><code>T</code></td><td>自定义<strong>model</strong>的默认参数(可选)</td></tr><tr><td><code>limits?:</code></td><td><a href="#limittype"><code>Array&lt;LimitType&gt;</code></a></td><td>自定义<strong>model</strong>的<code>options</code>值限制函数(可选)</td></tr><tr><td><code>modelDefCall?:</code></td><td><code>(model: BaseModel&lt;T&gt;) =&gt; void</code></td><td><code>BaseModel</code>初始化完成回调(可选)</td></tr></tbody></table><h3 id="elementtype" tabindex="-1"><a class="header-anchor" href="#elementtype" aria-hidden="true">#</a> <code>ElementType</code></h3><blockquote><p>继承了<code>HTMLElement</code>。</p></blockquote><table><thead><tr><th>属性</th><th>类型</th><th>备注</th></tr></thead><tbody><tr><td><code>loadingId</code></td><td><code>string或null</code></td><td>记录<code>loading</code>元素<code>id</code></td></tr><tr><td><code>$store</code></td><td><a href="#elementtype-store-elementstoretype"><code>ElementStoreType</code></a></td><td><code>loding</code>缓存内容</td></tr><tr><td><code>HTMLElement属性...</code></td><td>...</td><td>...</td></tr></tbody></table><h3 id="elementtype-store-elementstoretype" tabindex="-1"><a class="header-anchor" href="#elementtype-store-elementstoretype" aria-hidden="true">#</a> <code>ElementType.$store:ElementStoreType</code></h3><blockquote><p>绘制<strong>model</strong>时需要用到<code>WebLoading</code>的一些<strong>状态</strong>。</p></blockquote><table><thead><tr><th>属性</th><th>类型</th><th>备注</th></tr></thead><tbody><tr><td><code>options</code></td><td><code>OptionsType</code></td><td>储存最终合并的<code>options</code>参数</td></tr><tr><td><code>animationId</code></td><td><code>number或undefined</code></td><td>记录<code>animation</code>状态</td></tr><tr><td><code>loadingId</code></td><td><code>string或null</code></td><td>记录<code>loading</code>元素<code>id</code></td></tr><tr><td><code>hookCall</code></td><td><code>HooksCallType</code></td><td><a href="#elementtype-store-hookcall-hookscalltype"><code>loading</code>的钩子函数</a></td></tr><tr><td><code>model</code></td><td><code>BaseModel或null</code></td><td>正在使用的<strong>model</strong></td></tr></tbody></table><h3 id="elementtype-store-hookcall-hookscalltype" tabindex="-1"><a class="header-anchor" href="#elementtype-store-hookcall-hookscalltype" aria-hidden="true">#</a> <code>ElementType.$store.hookCall:HooksCallType</code></h3><blockquote><p><code>WebLoading</code>关闭时触发的钩子函数。</p><p><code>HOOKSCALL_KEY</code>枚举。</p></blockquote><table><thead><tr><th>属性</th><th>枚举值</th><th>类型</th><th>备注</th></tr></thead><tbody><tr><td><code>BEFORE_COLSE</code></td><td><code>beforeColse</code></td><td><code>Function</code></td><td>关闭前</td></tr><tr><td><code>COLSED</code></td><td><code>colsed</code></td><td><code>Function</code></td><td>关闭后(删除元素后)</td></tr></tbody></table><p>以自定义<code>custom</code>为例</p><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// 其余code省略</span>
<span class="token keyword">class</span> <span class="token class-name">CustomLoading</span> <span class="token keyword">extends</span> <span class="token class-name">BaseModel<span class="token operator">&lt;</span>CustomOptionsType<span class="token operator">&gt;</span></span> <span class="token punctuation">{</span>
    <span class="token function">constructor</span><span class="token punctuation">(</span>w<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> h<span class="token operator">:</span> <span class="token builtin">number</span><span class="token punctuation">,</span> canvas<span class="token operator">:</span> HTMLCanvasElement<span class="token punctuation">,</span> options<span class="token operator">:</span> Required<span class="token operator">&lt;</span>CustomOptionsType<span class="token operator">&gt;</span><span class="token punctuation">,</span> element<span class="token operator">:</span> ElementType<span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">super</span><span class="token punctuation">(</span>w<span class="token punctuation">,</span> h<span class="token punctuation">,</span> canvas<span class="token punctuation">,</span> options<span class="token punctuation">,</span> element<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">initOptions</span><span class="token punctuation">(</span>defOptions<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token keyword">this</span><span class="token punctuation">.</span>draw<span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>store<span class="token punctuation">.</span>hookCall<span class="token punctuation">.</span><span class="token function">beforeColse</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;关闭前&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>store<span class="token punctuation">.</span>hookCall<span class="token punctuation">.</span><span class="token function">colsed</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token operator">=&gt;</span> <span class="token punctuation">{</span>
            <span class="token builtin">console</span><span class="token punctuation">.</span><span class="token function">log</span><span class="token punctuation">(</span><span class="token string">&quot;关闭后&quot;</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
        <span class="token punctuation">}</span><span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
    <span class="token function">draw</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token punctuation">{</span>
        <span class="token keyword">let</span> op <span class="token operator">=</span> <span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">;</span>
        <span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span><span class="token function">fillRect</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> op<span class="token punctuation">.</span>size<span class="token punctuation">,</span> op<span class="token punctuation">.</span>size<span class="token punctuation">)</span><span class="token punctuation">;</span>
    <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="limittype" tabindex="-1"><a class="header-anchor" href="#limittype" aria-hidden="true">#</a> <code>LimitType</code></h3><blockquote><p>限制<code>options</code>参数值的范围。</p></blockquote><table><thead><tr><th>属性</th><th>类型</th><th>备注</th></tr></thead><tbody><tr><td><code>key</code></td><td><code>string</code></td><td>需要限制的<code>options</code>属性</td></tr><tr><td><code>message</code></td><td><code>string</code></td><td>超出限制的提示</td></tr><tr><td><code>limit</code></td><td><code>(key: any) =&gt; boolean</code></td><td>限制操作</td></tr></tbody></table><h3 id="_2、basemodel函数" tabindex="-1"><a class="header-anchor" href="#_2、basemodel函数" aria-hidden="true">#</a> 2、<code>BaseModel函数</code></h3><blockquote><p><code>BaseModel</code>自带的函数主要是用户<strong>扩展model</strong>绘制</p></blockquote><table><thead><tr><th>函数</th><th>返回</th><th>备注</th></tr></thead><tbody><tr><td><code>initContextCall</code></td><td><code>void</code></td><td><a href="#basemodel-initcontextcall">initContextCall</a></td></tr><tr><td><code>run</code></td><td><code>void</code></td><td><a href="#basemodel-run">run</a></td></tr><tr><td><code>clearRect</code></td><td><code>void</code></td><td><a href="#basemodel-clearrect">clearRect</a></td></tr><tr><td><code>drowRadiusRect</code></td><td><code>void</code></td><td><a href="#basemodel-drowradiusrect">drowRadiusRect</a></td></tr><tr><td><code>drawText</code></td><td><code>void</code></td><td><a href="#basemodel-drawtext">drawText</a></td></tr><tr><td><code>clearAnimationFrame</code></td><td><code>void</code></td><td><a href="#basemodel-clearanimationframe">clearAnimationFrame</a></td></tr></tbody></table><h3 id="basemodel-initcontextcall" tabindex="-1"><a class="header-anchor" href="#basemodel-initcontextcall" aria-hidden="true">#</a> <code>BaseModel:initContextCall</code></h3><blockquote><p><code>BaseModel</code>初始化自定义画布属性(继承时已经触发)。</p></blockquote><table><thead><tr><th>参数</th><th>类型</th><th>备注</th></tr></thead><tbody><tr><td><code>modelDefOptions?:</code></td><td><code>T</code></td><td>自定义<strong>model</strong>的默认<code>options</code>值。</td></tr><tr><td><code>limits?:</code></td><td><code>Array&lt;LimitType&gt;</code></td><td>自定义<strong>model</strong>的<code>options</code>值的限制范围。</td></tr><tr><td><code>modelDefCall?:</code></td><td><code>BaseModel&lt;T&gt;</code></td><td><code>BaseModel</code>初始化完成回调。</td></tr></tbody></table><h3 id="basemodel-run" tabindex="-1"><a class="header-anchor" href="#basemodel-run" aria-hidden="true">#</a> <code>BaseModel:run</code></h3><blockquote><p>根据<code>options</code>.delay延迟触发<code>requestAnimationFrame</code>。</p></blockquote><table><thead><tr><th>参数</th><th>类型</th><th>备注</th></tr></thead><tbody><tr><td><code>fun</code></td><td><code>Function</code></td><td>调用之前如果正处于加载，会清空上次的状态。</td></tr></tbody></table><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token comment">// 根据options.delay触发</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h3 id="basemodel-clearrect" tabindex="-1"><a class="header-anchor" href="#basemodel-clearrect" aria-hidden="true">#</a> <code>BaseModel:clearRect</code></h3><blockquote><p>清空画布。</p></blockquote><table><thead><tr><th>参数</th><th>类型</th><th>备注</th></tr></thead><tbody><tr><td><code>x?:</code></td><td><code>number</code></td><td>清空起点X</td></tr><tr><td><code>y?:</code></td><td><code>number</code></td><td>清空的起点Y</td></tr><tr><td><code>w_r?:</code></td><td><code>number</code></td><td>清空终点X(宽度)，圆形清空情况下<code>w_r</code>是<strong>半径</strong></td></tr><tr><td><code>h?:</code></td><td><code>number</code></td><td>清空终点Y(高度)</td></tr></tbody></table><ul><li>清空全部</li></ul><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">clearRect</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><blockquote><p>考虑到绘制区域可能会超出默认宽高，全部清空会清空<strong>两倍</strong>的宽高。</p></blockquote><ul><li>自定义清空</li></ul><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">clearRect</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">,</span><span class="token number">100</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><blockquote><p>清空从<code>x=0,y=0</code>的坐标开始，到<code>x=100,y=100</code>终止。</p></blockquote><ul><li>圆形区域清空</li></ul><div class="language-javascript line-numbers-mode" data-ext="js"><pre class="language-javascript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">clearRect</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">0</span><span class="token punctuation">,</span><span class="token number">10</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><blockquote><p>清空<code>x=0,y=0</code>并且半径为<code>10</code>的区域。</p></blockquote><h3 id="basemodel-drowradiusrect" tabindex="-1"><a class="header-anchor" href="#basemodel-drowradiusrect" aria-hidden="true">#</a> <code>BaseModel:drowRadiusRect</code></h3><blockquote><p>绘制含有圆角的矩形。</p></blockquote><table><thead><tr><th>参数</th><th>类型</th><th>备注</th></tr></thead><tbody><tr><td><code>x</code></td><td><code>number</code></td><td>起点X</td></tr><tr><td><code>y</code></td><td><code>number</code></td><td>起点Y</td></tr><tr><td><code>w</code></td><td><code>number</code></td><td>终点X(宽度)</td></tr><tr><td><code>h</code></td><td><code>number</code></td><td>终点Y(高度)</td></tr></tbody></table><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">drowRadiusRect</span><span class="token punctuation">(</span><span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">0</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">100</span><span class="token punctuation">,</span> <span class="token number">10</span><span class="token punctuation">)</span>
<span class="token comment">// 需要自己绘制</span>
<span class="token keyword">this</span><span class="token punctuation">.</span>ctx<span class="token punctuation">.</span><span class="token function">fill</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>绘制<code>x=0,y=0</code>宽高为<code>100</code>并圆角为<code>10</code>的矩形。</p></blockquote><h3 id="basemodel-drawtext" tabindex="-1"><a class="header-anchor" href="#basemodel-drawtext" aria-hidden="true">#</a> <code>BaseModel:drawText</code></h3><blockquote><p>绘制默认文本。</p></blockquote><table><thead><tr><th>参数</th><th>类型</th><th>备注</th></tr></thead><tbody><tr><td><code>params?:</code></td><td><a href="#basemodel-drawtext-drawtextparamstype"><code>DrawTextParamsType</code></a></td><td>绘制文本参数</td></tr></tbody></table><h3 id="basemodel-drawtext-drawtextparamstype" tabindex="-1"><a class="header-anchor" href="#basemodel-drawtext-drawtextparamstype" aria-hidden="true">#</a> <code>BaseModel:drawText.DrawTextParamsType</code></h3><table><thead><tr><th>参数</th><th>类型</th><th>默认值</th><th>备注</th></tr></thead><tbody><tr><td><code>esGap</code></td><td><code>number</code></td><td><code>0</code></td><td>格外的文本空隙(本身textGap+fontSize)</td></tr><tr><td><code>x</code></td><td><code>number</code></td><td><code>0</code></td><td>x轴</td></tr><tr><td><code>text</code></td><td><code>string</code></td><td><code>加载中...</code></td><td>文本</td></tr><tr><td><code>textColor</code></td><td><code>string</code></td><td><code>rgba(64,158,255,1)</code></td><td>文本颜色</td></tr></tbody></table><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">drawText</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><blockquote><p>绘制<code>x=0,y=0</code>宽高为<code>100</code>并圆角为<code>10</code>的矩形。</p></blockquote><h3 id="basemodel-clearanimationframe" tabindex="-1"><a class="header-anchor" href="#basemodel-clearanimationframe" aria-hidden="true">#</a> <code>BaseModel:clearAnimationFrame</code></h3><blockquote><p>清空(停止)<code>requestAnimationFrame</code>。</p></blockquote><table><thead><tr><th>参数</th><th>类型</th><th>备注</th></tr></thead><tbody><tr><td><code>id</code></td><td><code>number</code></td><td><code>animationId</code></td></tr></tbody></table><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">clearAnimationFrame</span><span class="token punctuation">(</span>element<span class="token punctuation">.</span>$store<span class="token punctuation">.</span>animationId<span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><blockquote><p>传入的id是<code>requestAnimationFrame</code>返回的<code>id</code>，<code>WebLoading</code>在store中已经保存。</p></blockquote><h3 id="_3、basemodel-技巧" tabindex="-1"><a class="header-anchor" href="#_3、basemodel-技巧" aria-hidden="true">#</a> 3、<code>BaseModel</code> 技巧</h3><h3 id="动态的options" tabindex="-1"><a class="header-anchor" href="#动态的options" aria-hidden="true">#</a> 动态的options</h3><blockquote><p>无论是初始化还是在<code>run</code>函数中，修改<code>options</code>都是实时动态的，以此可以控制<code>requestAnimationFrame</code>触发的延迟时间不那么规律。</p></blockquote><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">this</span><span class="token punctuation">.</span><span class="token function">run</span><span class="token punctuation">(</span><span class="token punctuation">(</span><span class="token punctuation">)</span><span class="token operator">=&gt;</span><span class="token punctuation">{</span>
    <span class="token comment">// 动态修改delay会影响run函数的触发</span>
    <span class="token keyword">this</span><span class="token punctuation">.</span>options<span class="token punctuation">.</span>delay <span class="token operator">=</span> <span class="token number">10</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><h2 id="html配置方式" tabindex="-1"><a class="header-anchor" href="#html配置方式" aria-hidden="true">#</a> html配置方式</h2><blockquote><p><code>options</code> 中添加<strong>html</strong>配置即可，它的优先级大于<strong>model</strong>与<code>custom</code>。</p></blockquote><h3 id="初始化" tabindex="-1"><a class="header-anchor" href="#初始化" aria-hidden="true">#</a> 初始化</h3><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token keyword">import</span> initLoading <span class="token keyword">from</span> <span class="token string">&#39;web-loading/src/loading&#39;</span>
<span class="token keyword">let</span> webLoading <span class="token operator">=</span> <span class="token function">initLoading</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
    html<span class="token operator">:</span><span class="token template-string"><span class="token template-punctuation string">\`</span><span class="token string">&lt;div class=&quot;spinner&quot;&gt;
    &lt;svg viewBox=&quot;25 25 50 50&quot; class=&quot;circular&quot;&gt;
        &lt;circle stroke-miterlimit=&quot;10&quot; stroke-width=&quot;3&quot; fill=&quot;none&quot; r=&quot;20&quot; cy=&quot;50&quot; cx=&quot;50&quot; class=&quot;path&quot;&gt;&lt;/circle&gt;
    &lt;/svg&gt;
&lt;/div&gt;</span><span class="token template-punctuation string">\`</span></span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p><strong>html</strong>优先级大于<strong>custom</strong>。</p></blockquote><h3 id="css动画" tabindex="-1"><a class="header-anchor" href="#css动画" aria-hidden="true">#</a> css动画</h3><div class="language-css line-numbers-mode" data-ext="css"><pre class="language-css"><code><span class="token selector">.spinner</span> <span class="token punctuation">{</span>
  <span class="token property">--red</span><span class="token punctuation">:</span> #d62d20<span class="token punctuation">;</span>
  <span class="token property">--blue</span><span class="token punctuation">:</span> #0057e7<span class="token punctuation">;</span>
  <span class="token property">--green</span><span class="token punctuation">:</span> #008744<span class="token punctuation">;</span>
  <span class="token property">--yellow</span><span class="token punctuation">:</span> #ffa700<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 60px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.spinner:before</span> <span class="token punctuation">{</span>
  <span class="token property">content</span><span class="token punctuation">:</span> <span class="token string">&quot;&quot;</span><span class="token punctuation">;</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
  <span class="token property">padding-top</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.circular</span> <span class="token punctuation">{</span>
  <span class="token property">animation</span><span class="token punctuation">:</span> rotate73451 2s linear infinite<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">transform-origin</span><span class="token punctuation">:</span> center center<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.path</span> <span class="token punctuation">{</span>
  <span class="token property">stroke-dasharray</span><span class="token punctuation">:</span> 1<span class="token punctuation">,</span> 200<span class="token punctuation">;</span>
  <span class="token property">stroke-dashoffset</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">animation</span><span class="token punctuation">:</span> dash0175 1.5s ease-in-out infinite<span class="token punctuation">,</span> color7123 6s ease-in-out infinite<span class="token punctuation">;</span>
  <span class="token property">stroke-linecap</span><span class="token punctuation">:</span> round<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@keyframes</span> rotate73451</span> <span class="token punctuation">{</span>
  <span class="token selector">100%</span> <span class="token punctuation">{</span>
    <span class="token property">transform</span><span class="token punctuation">:</span> <span class="token function">rotate</span><span class="token punctuation">(</span>360deg<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@keyframes</span> dash0175</span> <span class="token punctuation">{</span>
  <span class="token selector">0%</span> <span class="token punctuation">{</span>
    <span class="token property">stroke-dasharray</span><span class="token punctuation">:</span> 1<span class="token punctuation">,</span> 200<span class="token punctuation">;</span>
    <span class="token property">stroke-dashoffset</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">50%</span> <span class="token punctuation">{</span>
    <span class="token property">stroke-dasharray</span><span class="token punctuation">:</span> 89<span class="token punctuation">,</span> 200<span class="token punctuation">;</span>
    <span class="token property">stroke-dashoffset</span><span class="token punctuation">:</span> -35px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">100%</span> <span class="token punctuation">{</span>
    <span class="token property">stroke-dasharray</span><span class="token punctuation">:</span> 89<span class="token punctuation">,</span> 200<span class="token punctuation">;</span>
    <span class="token property">stroke-dashoffset</span><span class="token punctuation">:</span> -124px<span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>

<span class="token atrule"><span class="token rule">@keyframes</span> color7123</span> <span class="token punctuation">{</span>
  <span class="token selector">100%, 0%</span> <span class="token punctuation">{</span>
    <span class="token property">stroke</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--red<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">40%</span> <span class="token punctuation">{</span>
    <span class="token property">stroke</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--blue<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">66%</span> <span class="token punctuation">{</span>
    <span class="token property">stroke</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--green<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>

  <span class="token selector">80%, 90%</span> <span class="token punctuation">{</span>
    <span class="token property">stroke</span><span class="token punctuation">:</span> <span class="token function">var</span><span class="token punctuation">(</span>--yellow<span class="token punctuation">)</span><span class="token punctuation">;</span>
  <span class="token punctuation">}</span>
<span class="token punctuation">}</span>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><blockquote><p>class命名尽量隔绝外部元素。</p></blockquote>`,77);function v(b,h){const a=c("RouterLink");return l(),d("div",null,[u,n("blockquote",null,[n("p",null,[s("这里的使用都以单独引入为例，"),t(a,{to:"/guide/#%E5%85%A8%E5%B1%80%E5%BC%95%E5%85%A5"},{default:e(()=>[s("全局引入")]),_:1}),s("使用类似。")])]),r,n("p",null,[t(a,{to:"/document/model.html#%E6%94%AF%E6%8C%81%E7%9A%84model"},{default:e(()=>[s("支持的model")]),_:1})]),k,n("p",null,[t(a,{to:"/document/model.html"},{default:e(()=>[s("model配置详情")]),_:1})]),m])}const y=p(i,[["render",v],["__file","use.html.vue"]]);export{y as default};
