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

Vue.js 플러그인

페이지의 로딩바를 보여주는 플러그인을 만들려고 한다.

요구사항

1. 페이지 로딩 element는 1개만 관리하며 show/remove 한다.
2. 페이지를 떠날때는 (뒤로가기 버튼 등) 로딩 상태를 remove 한다. (이 전 페이지로 갔는데 여전히 로딩중이면 이상하니깐~)
3. 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>