import{_ as n,p as e,q as a,a1 as s}from"./framework-2d0bbdc3.js";const o={},t=s(`<h1 id="guide" tabindex="-1"><a class="header-anchor" href="#guide" aria-hidden="true">#</a> guide</h1><h2 id="introduce" tabindex="-1"><a class="header-anchor" href="#introduce" aria-hidden="true">#</a> introduce</h2><p>There are many ways to implement loading on the Web, such as using <code>css</code> animation,<code>js</code> operation element, <code>gif</code> image, <code>svg</code> animation, and <code>loading</code> in the <code>ui</code> framework. Each has its own advantages. The operation element may be more convenient, but it will affect performance or other elements. The dynamic image performance is good, but the customization is not ideal.</p><p><code>WebLoading</code>is a <code>loading</code>animation plug-in based on web encapsulation. The main <strong>model</strong> is drawn through<code> Canvas</code>. This method will not affect the elements in the interface. Of course, <code>WebLoading</code> also provides<code>html</code>configuration, which is compatible with the <strong>html</strong> loading method. The default <strong>model</strong> module provides its own <code>options</code> configuration attribute. If you want to be closer to the business, you can use<code>Custom</code>to customize it.<code>WebLoading</code>provides<code> BaseModel</code> inheritance <code>class</code> to make it easier for you to customize your own<code>loading</code>or<code>html</code>loading method.</p><h2 id="realization" tabindex="-1"><a class="header-anchor" href="#realization" aria-hidden="true">#</a> realization</h2><p><code>Each **model** in WebLoading </code>is drawn using<code> Canvas</code>. The startup methods include <code>DOM</code> (element mount), <code>FULL</code> (full screen), and <code>MINI</code> (mobile terminal).</p><p>The principle is very similar. For <code>DOM</code>, first we need <code>initLoading</code> to initialize the <strong>model</strong> that you need to render and provide custom parameters. Of course, this operation is not necessary, because <code>WebLoading</code> has initialized all the default data. At this time, the operation <code>WebLoading</code> related function is thrown.</p><p>Starting the <code>WebLoading</code> and calling the <code>loading</code> function requires a <code>HtmlElement</code> element, which must have <code>children</code> instead of a single label element. When you start <code>WebLoading</code>, you will get the mounted element and add a <code>Canvas</code> in<code>children</code>. At the same time, the location and size of the element will be calculated and synchronized to<code> Canvas</code> for optimal display<code>WebLoading</code>will draw the specific <strong>model</strong> according to the<code> options</code> parameter, and the <strong>model</strong> mainly uses the <code>requestAnimationFrame</code> to callback and render multiple times to achieve each frame of animation.</p><p>Note: If the configuration is rendered through <strong>html</strong>, you will not go to the next step.</p><p><code>WebLoading </code> package is mainly divided into three layers</p><ul><li>Interaction layer: operations between developers and <code>WebLoading</code>, such as initialization, startup, shutdown, obtaining relevant information, etc.</li><li>Logical layer: get the elements to be initialized and mounted after <code>WebLoading</code> receives<code> options</code> and <code>canvas</code>.</li><li>Model layer: Inherit <code>BaseModel</code> to get the initialized <code>canvas</code> for drawing module.</li></ul><h2 id="install" tabindex="-1"><a class="header-anchor" href="#install" aria-hidden="true">#</a> install</h2><blockquote><p>Download according to your own package management tool.</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="use" tabindex="-1"><a class="header-anchor" href="#use" aria-hidden="true">#</a> use</h2><h3 id="get-element" tabindex="-1"><a class="header-anchor" href="#get-element" aria-hidden="true">#</a> Get Element</h3><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// No frame</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">// ...(The purpose is to get the dom element)</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="global-introduction" tabindex="-1"><a class="header-anchor" href="#global-introduction" aria-hidden="true">#</a> Global introduction</h3><ul><li><code>Cdn </code> introduction</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>Project <code>import</code> import</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">// Introduce initLoading globally and mount it on 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">// Custom 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>Or so</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">// Custom 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>parameter <ul><li><code>options?:OptionsType</code></li></ul></li><li>return <ul><li><code>webLoading:LoadingType</code></li></ul></li></ul></blockquote><h3 id="typescript-project-import" tabindex="-1"><a class="header-anchor" href="#typescript-project-import" aria-hidden="true">#</a> TypeScript project import</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">// Custom 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>parameter <ul><li><code>options?:OptionsType</code></li></ul></li><li>return <ul><li><code>webLoading:LoadingType</code></li></ul></li></ul></blockquote><h3 id="start-up" tabindex="-1"><a class="header-anchor" href="#start-up" aria-hidden="true">#</a> start-up</h3><div class="language-typescript line-numbers-mode" data-ext="ts"><pre class="language-typescript"><code><span class="token comment">// Note: After the web page is loaded, call 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>parameter</p><ul><li><p><code>dom</code>:Mounted<code>HtmlElement</code>element</p></li><li><p><code>options?:OptionsType</code>, each startup supports coverage<code>options</code>.</p></li></ul></blockquote><h2 id="start-mode" tabindex="-1"><a class="header-anchor" href="#start-mode" aria-hidden="true">#</a> Start mode</h2><p><code>DOM </code>,<code>FULL</code>,<code>MINI</code>All three startup methods need to be based on<code>HtmlElement</code>, where<code>FULL</code>and<code>MINI</code>are the extended startup methods, and<code>HtmlElement</code>is not required in the parameters, because<code>WebLoading</code>has processed the process from creation to disappearance of elements.</p><ul><li>Modify the <code>type</code> switch start mode</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">// or LOADING_TYPES.FULL</span>
<span class="token punctuation">}</span><span class="token punctuation">)</span>
<span class="token comment">// start</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>Function modification</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">// start</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>Global introduction. Similarly, functions have been mounted on <code>window</code>.</li><li>Function modification <code>WebLoading</code> is also implemented internally by modifying <code>type</code>.</li><li>The extension start mode does not need to provide elements.</li></ul></blockquote>`,38),i=[t];function c(d,l){return e(),a("div",null,i)}const r=n(o,[["render",c],["__file","index.html.vue"]]);export{r as default};
