import{_ as n,p as s,q as a,a1 as e}from"./framework-2d0bbdc3.js";const o={},t=e(`<h1 id="指南" tabindex="-1"><a class="header-anchor" href="#指南" aria-hidden="true">#</a> 指南</h1><h2 id="介绍" tabindex="-1"><a class="header-anchor" href="#介绍" aria-hidden="true">#</a> 介绍</h2><p>Web 中实现 loading 的方式有很多种，例如使用<code>css</code>动画、<code>js</code>操作元素、<code>gif</code>图片、<code>svg</code>动画、<code>ui</code>框架中自带<code>loading</code>等等，各有所优，操作元素可能更方便，但会影响性能或其他元素，动态图片性能很好，但自定义不理想。</p><p><code>WebLoading</code> 是一个基于 web 封装的<code>loading</code>动画插件，主要<strong>model</strong>是通过<code>Canvas</code>绘制，这种方式不会影响到界面中的元素，当然，<code>WebLoading</code>也提供了<code>html</code>配置兼容了<strong>html</strong>加载方式。默认的<strong>model</strong>模块都提供了独自的<code>options</code>配置属性，如果想更贴近业务可以使用<code>Custom</code>进行自定义，<code>WebLoading</code>提供了<code>BaseModel</code> 继承<code>class</code>让你更方便自定义自己的<code>loading</code>，或者<code>html</code>加载方式。</p><h2 id="实现" tabindex="-1"><a class="header-anchor" href="#实现" aria-hidden="true">#</a> 实现</h2><p><code>WebLoading</code>中每一个<strong>model</strong>都是使用<code>Canvas</code>绘制，启动方式分别有<code>DOM</code>(元素挂载)、<code>FULL</code>(全屏)、<code>MINI</code>(移动端)。</p><p>原理大同小异，这里以<code>DOM</code>来讲述，首先我们需要<code>initLoading</code>初始化你需要渲染的<strong>model</strong>并提供自定义参数，当然，这个操作不是必须的，因为<code>WebLoading</code>已经初始化所以的默认数据，此时抛出操作<code>WebLoading</code>相关函数。</p><p>启动<code>WebLoading</code>调用<code>loading</code>函数需要一个<code>HtmlElement</code>元素，该元素必须拥有<code>children</code>，而不是一个单标签元素。启动<code>WebLoading</code>时会获取到这个挂载的元素，并在<code>children</code>添加一个<code>Canvas</code>，同时会计算该元素位置以及大小以最优显示同步到<code>Canvas</code>上。<code>WebLoading</code>会根据<code>options</code>参数来绘制具体的<strong>model</strong>，<strong>model</strong>中主要以<code>requestAnimationFrame</code>来进行回调多次渲染，以来实现每一帧动画。</p><p>注意：如果配置是通过<strong>html</strong>渲染，那么就不会走上一步。</p><p><code>WebLoading</code>封装上主要分隔三层</p><ul><li>交互层：开发者与<code>WebLoading</code>的操作，例如初始化、启动、关闭、获取相关信息等等。</li><li>逻辑层：获取到<code>WebLoading</code>接收<code>options</code>后进行初始化挂载的元素以及<code>canvas</code>等等。</li><li>model 层：继承<code>BaseModel</code>获取初始化后的<code>canvas</code>进行绘制模块。</li></ul><h2 id="安装" tabindex="-1"><a class="header-anchor" href="#安装" aria-hidden="true">#</a> 安装</h2><blockquote><p>根据自己的包管理工具下载。</p></blockquote><div class="language-bash line-numbers-mode" data-ext="sh"><pre class="language-bash"><code><span class="token function">npm</span> <span class="token function">install</span> web-loading
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><h2 id="使用" tabindex="-1"><a class="header-anchor" href="#使用" aria-hidden="true">#</a> 使用</h2><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 comment">// 无框架情况</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">&#39;xxx&#39;</span><span class="token punctuation">)</span>
<span class="token comment">// vue</span>
<span class="token keyword">let</span> dom <span class="token operator">=</span> <span class="token function">ref</span><span class="token punctuation">(</span><span class="token punctuation">)</span>
<span class="token comment">// ...(目的是获取dom元素)</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><ul><li><code>cdn</code>引入</li></ul><div class="language-html line-numbers-mode" data-ext="html"><pre class="language-html"><code><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>
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div></div></div><ul><li>工程项目 <code>import</code> 引入</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 string">&#39;web-loading&#39;</span>
<span class="token comment">// 全局引入initLoading挂载在window上</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>
  <span class="token comment">// 自定义options</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><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 constant">WL</span> <span class="token keyword">from</span> <span class="token string">&#39;web-loading&#39;</span>
<span class="token keyword">let</span> webLoading <span class="token operator">=</span> <span class="token constant">WL</span><span class="token punctuation">.</span><span class="token function">initLoading</span><span class="token punctuation">(</span><span class="token punctuation">{</span>
  <span class="token comment">// 自定义options</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><blockquote><ul><li>参数 <ul><li><code>options?:OptionsType</code></li></ul></li><li>返回 <ul><li><code>webLoading:LoadingType</code></li></ul></li></ul></blockquote><h3 id="typescript项目引入" tabindex="-1"><a class="header-anchor" href="#typescript项目引入" aria-hidden="true">#</a> TypeScript项目引入</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">import</span> <span class="token keyword">type</span> <span class="token punctuation">{</span> LoadingType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;web-loading/src/types.d&#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 comment">// 自定义options</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><blockquote><ul><li>参数 <ul><li><code>options?:OptionsType</code></li></ul></li><li>返回 <ul><li><code>webLoading:LoadingType</code></li></ul></li></ul></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 comment">// 注意:在网页加载完成后在调用loading</span>
window<span class="token punctuation">.</span><span class="token function-variable function">onload</span> <span class="token operator">=</span> <span class="token keyword">function</span> <span class="token punctuation">(</span><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></div><blockquote><p>参数</p><ul><li><p><code>dom</code>:挂载的<code>HtmlElement</code>元素</p></li><li><p><code>options?:OptionsType</code>，每次启动支持覆盖<code>options</code>。</p></li></ul></blockquote><h2 id="启动方式" tabindex="-1"><a class="header-anchor" href="#启动方式" aria-hidden="true">#</a> 启动方式</h2><p><code>DOM</code>、<code>FULL</code>、<code>MINI</code>三种启动方式都需要基于<code>HtmlElement</code>，这里<code>FULL</code>、<code>MINI</code>是扩展的启动方式，参数中无须提供<code>HtemlElment</code>，是因为<code>WebLoading</code>已经处理的元素的创建到消失的流程。</p><ul><li>修改<code>type</code>切换启动方式</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> LoadingType <span class="token punctuation">}</span> <span class="token keyword">from</span> <span class="token string">&#39;web-loading/src/types.d&#39;</span>
<span class="token keyword">import</span> <span class="token punctuation">{</span> <span class="token constant">LOADING_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">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>
  type<span class="token operator">:</span> <span class="token constant">LOADING_TYPES</span><span class="token punctuation">.</span><span class="token constant">MINI</span> <span class="token comment">// 或 LOADING_TYPES.FULL</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// 启动</span>
webLoading<span class="token punctuation">.</span><span class="token function">loading</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></div><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 punctuation">{</span> fullLoading<span class="token punctuation">,</span> miniLoading <span class="token punctuation">}</span> <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">fullLoading</span><span class="token punctuation">(</span><span class="token punctuation">)</span> <span class="token comment">// miniLoading</span>
<span class="token comment">// 启动</span>
webLoading<span class="token punctuation">.</span><span class="token function">loading</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><blockquote><ul><li>全局引入，同理，函数都已经挂载<code>window</code>上。</li><li>函数修改<code>WebLoading</code>内部也是修改<code>type</code>实现。</li><li>扩展启动方式无需提供元素。</li></ul></blockquote>`,38),c=[t];function i(d,p){return s(),a("div",null,c)}const u=n(o,[["render",i],["__file","index.html.vue"]]);export{u as default};
