커스텀 플러그인 (simple modal) on redgoose note

커스텀 플러그인 (simple modal)

Nest: Development Category: vue.js 2018-12-14

알면 정말 좋은 부분인 전역영역에 플러그인을 사용해서 특정 컴포넌트나 매서드를 사용할 수 있다.

컴포넌트 부분

modal이 되는 컴포넌트를 만들어둔다.

<template>
<transition name="loading">
  <div v-if="show" class="loading">
    loading component
  </div>
</transition>
</template>

<script>
export default {
  name: 'loading',
  data() {
    return {
      show: false
    };
  },
  methods: {
    on() {
      this.show = true;
    },
    off() {
      this.show = false;
    }
  },
}
</script>

<style lang="scss" scoped>
.loading {
  position: fixed;
  z-index: 30000000;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  background: rgba(#fff, .75);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: opacity .3s ease;

  &-enter {
    opacity: 0;
  }
  &-leave-active {
    opacity: 0;
  }
}
</style>

플러그인 스크립트

핵심적인 영역이다. 컴포넌트를 불러와서 메서드에 따라서 dom이 만들어지고 삭제된다.

import Container from './component';

const Plugin = {

  install(Vue) {
    const LoadingConstructor = Vue.extend(Container);
    let instance = null;

    Vue.prototype.$loading = {
      on() {
        if (instance) {
          instance.show = true;
          return;
        }
        instance = new LoadingConstructor({
          el: document.createElement('div'),
          data() {
            return {}
          }
        });
        instance.show = true;
        document.body.appendChild(instance.$el);
      },
      off() {
        if (instance) {
          instance.show = false;
          return;
        }
      },
    };
  }

};

export default Plugin;

사용하기

로딩같이 화면을 띄우는 것이라면 메서드로 실행하여 나오게 하는게 편리함.

// loading on
this.$loading.on();

// loading off
this.$loading.off();