<div id="readability-page-1" class="page"><div>
<p>페이지의 로딩바를 보여주는 플러그인을 만들려고 한다.</p>
<h2>요구사항</h2>
<ol>
<li>페이지 로딩 element는 1개만 관리하며 show/remove 한다.</li>
<li>페이지를 떠날때는 (뒤로가기 버튼 등) 로딩 상태를 remove 한다. (이 전 페이지로 갔는데 여전히 로딩중이면 이상하니깐~)</li>
<li>element ui에서 제공하는 로딩 element를 이용한다.</li>
</ol>
<h2>결과물</h2>
<figure width="80%" data-origin-width="0" data-origin-height="0" data-ke-mobilestyle="widthContent"><span data-url="https://blog.kakaocdn.net/dn/IxcEl/btqNMgo0LCh/XeS15XPnJ0jI9nO628r0oK/img.png" data-lightbox="lightbox" data-alt=""><img src="https://blog.kakaocdn.net/dn/IxcEl/btqNMgo0LCh/XeS15XPnJ0jI9nO628r0oK/img.png" width="80%" data-origin-width="0" data-origin-height="0" data-ke-mobilestyle="widthContent"></span></figure>
<h2>로딩 클래스</h2>
<ul>
<li>/src/plugin/elloading/ElLoading.ts</li>
</ul>
<pre><code>import * as $ from "jquery"

export default class ElLoading {
  private readonly loadingElement: string
  private readonly elementId: string
  private readonly loadingPageClass: string

  constructor(elementId: string, loadingPageClass: string) {
    this.elementId = elementId
    this.loadingPageClass = loadingPageClass
    this.loadingElement =
      '&lt;div id="' +
      elementId +
      '" class="el-loading-mask"&gt;' +
      '&lt;div class="el-loading-spinner"&gt;' +
      '&lt;svg viewBox="25 25 50 50" class="circular"&gt;&lt;circle cx="50" cy="50" r="20" fill="none" class="path"&gt;&lt;/circle&gt;&lt;/svg&gt;' +
      "&lt;/div&gt;" +
      "&lt;/div&gt;"
  }

  public start() {
    $(`#${this.elementId}`).remove()
    $(`.${this.loadingPageClass}`).append(this.loadingElement)
  }

  public complete() {
    $(`#${this.elementId}`).remove()
  }
}</code></pre><h2>로딩 플러그인</h2>
<ul>
<li>/src/plugin/elloading/ELLoadingPlugin.js</li>
</ul>
<pre><code>import ElLoading from "@/plugin/elloading/ElLoading"

export default {
  install(Vue, { loadingElementId = "", loadingPageClass = "" }) {
    const elloading = new ElLoading(loadingElementId, loadingPageClass)
    Vue.prototype.$elloading = elloading

    Vue.mixin({
      beforeDestroy() {
        elloading.complete()
      },
    })
  },
}</code></pre><h2>플러그인 사용</h2>
<ul>
<li>/src/main.js</li>
</ul>
<pre><code>import ElLoadingPlugin from "@/plugin/elloading/ElLoadingPlugin"
Vue.use(ElLoadingPlugin, { loadingElementId: "page-loading", loadingPageClass: "rightbar" })</code></pre><h2>사용 방법</h2>
<pre><code>&lt;template&gt;
...
&lt;div class="rightbar"&gt;&lt;/div&gt;
&lt;/template&gt;

&lt;script&gt;
export default { 
    name: "Foo", 
    mounted() { 
        $this.loading.start()
        $this.loading.complete() 
    }
}
&lt;/script&gt;</code></pre></div></div>

호돌맨의 블로그

JuHyun Lee

Vue.js 플러그인
페이지의 로딩바를 보여주는 플러그인을 만들려고 한다.
요구사항
페이지 로딩 element는 1개만 관리하며 show/remove 한다.
페이지를 떠날때는 (뒤로가기 버튼 등) 로딩 상태를 remove 한다. (이 전 페이지로 갔는데 여전히 로딩중이면 이상하니깐~)
element ui에서 제공하는 로딩 element를 이용한다.
결과물
로딩 클래스
/src/plugin/elloading/ElLoading.ts
import * as $ from "jquery"
export default class ElLoading {
  private readonly loadingElement: string
  private readonly elementId: string
  private readonly loadingPageClass: string
  constructor(elementId: string, loadingPageClass: string) {
    this.elementId = elementId
    this.loadingPageClass = loadingPageClass
    this.loadingElement =
      '<div id="' +
      elementId +
      '" class="el-loading-mask">' +
      '<div class="el-loading-spinner">' +
      '<svg viewBox="25 25 50 50" class="circular"><circle cx="50" cy="50" r="20" fill="none" class="path"></circle></svg>' +
      "</div>" +
      "</div>"
  }
  public start() {
    $(`#${this.elementId}`).remove()
    $(`.${this.loadingPageClass}`).append(this.loadingElement)
  }
  public complete() {
    $(`#${this.elementId}`).remove()
  }
}
로딩 플러그인
/src/plugin/elloading/ELLoadingPlugin.js
import ElLoading from "@/plugin/elloading/ElLoading"
export default {
  install(Vue, { loadingElementId = "", loadingPageClass = "" }) {
    const elloading = new ElLoading(loadingElementId, loadingPageClass)
    Vue.prototype.$elloading = elloading
    Vue.mixin({
      beforeDestroy() {
        elloading.complete()
      },
    })
  },
}
플러그인 사용
/src/main.js
import ElLoadingPlugin from "@/plugin/elloading/ElLoadingPlugin"
Vue.use(ElLoadingPlugin, { loadingElementId: "page-loading", loadingPageClass: "rightbar" })
사용 방법
<template>
...
<div class="rightbar"></div>
</template>
<script>
export default { 
    name: "Foo", 
    mounted() { 
        $this.loading.start()
        $this.loading.complete() 
    }
}
</script>

Vue.js 간단한 플러그인 만들기

댓글