Vue插件loading插件

前言

在写vue项目的时候，比组件更灵活更方便的是用插件，下面先写一个简单的loading插件，之后会将以前写的弹出大图，视频的插件依次记录下来

loading.vue

<template>
    <div
        class="loading-wrap"
        v-if="isShow"
    >
        <div class="loading-mask"></div>
        <div class="loading-cont">
            {{text}}
        </div>
    </div>
</template>

<script>
export default {
  components: {

  },
  props: {
    show: Boolean,
    text: {
      type: String,
      default: '正在加载中。。。。'
    }
  },
  data () {
    return {
      isShow: false
    }
  },
  mounted () {
  },
  methods: {

    show () {
      console.log(this)
      this.isShow = true
    }
  }
}
</script>

<style scoped lang="less">
.loading-wrap {
  width: 100%;
  height: 100%;
  margin: auto;
  .loading-mask {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: #000;
    opacity: 0.6;
  }
  .loading-cont {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 1;
    color: #000;
  }
}
</style>

loading.js

import loading from '@/components/loading.vue'
export default {
  install: function (Vue) {
    let Loading = Vue.extend(loading)
    let $vm = new Loading({
      el: document.createElement('div')
    })
    document.getElementsByTagName('body')[0].appendChild($vm.$el)
    Vue.prototype.$loaded = {
      show() {
        $vm.show()
      },
      hide() {
        $vm.$destroy() // $vm.$destory && $vm.$destory()
        document.getElementsByTagName('body')[0].removeChild($vm.$el)
      }
    }

  }

}

vue入口文件中对插件进行全局注册

import loaded from '../../plugins/loading'
Vue.use(loaded)