创建公共的loading及Error并挂载到Vue.protot

首先在components中添加loading及Error的文件

 // loading.vue
<template>
  <div class="toast"
       :class="{
      'is-toast': !ShowLoading.show
    }">
    <div class="lang-mask_transparent"></div>
    <div class="lang-toast">
      <i class="lang-loading lang-icon_toast"></i>
      <p class="lang-toast__content" style="color: #ffffff">{{ShowLoading.txt}}</p>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      ShowLoading: {
        txt: '数据加载中', // 提示信息
        show: false // 是否显示
      }
    }
  },
  methods: {
    ShowLoadingFun (text) { // 提示弹窗
      this.ShowLoading.txt = text || this.ShowLoading.txt
      this.ShowLoading.show = true
    },
    HideLoadingFun () {
      this.ShowLoading.show = false
    }
  }
}
</script>

<style lang="stylus">
  .toast {
    display: block;
  }
  .is-toast {
    display: none;
  }

  .lang-toast {
    position: fixed;
    z-index: 999;
    width: 240px;
    height: 140px;
    top: 50%;
    left: 50%;
    margin-top: -60px;
    margin-left: -120px;
    background: rgba(17,17,17,0.7);
    text-align: center;
    border-radius: 5px;
    color: #FFFFFF;
    font-size: 24px;
  }
  .lang-icon_toast {
    margin: 22px 0 0;
    display: block;
  &.lang-icon-success-no-circle{
  &:before {
     color: #FFFFFF;
     font-size: 55px;
   }
  }
  &.lang-loading{
     margin:30px 0 10px;
     width:38px;
     height:38px;
     vertical-align: baseline;
   }
  }

  .lang-toast__content {
    margin: 0 0 15px;
    font-size: 24px;
    color #fff
  }

  .lang-mask {
    position: fixed;
    z-index: 1000;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
    background: rgba(0, 0, 0, .6);
  }

  .lang-mask_transparent{
    position: fixed;
    z-index: 10;
    top: 0;
    right: 0;
    left: 0;
    bottom: 0;
  }

  .lang-loading {
    width:20px;
    height:20px;
    display: inline-block;
    vertical-align: middle;
    animation: langLoading 1s steps(12, end) infinite;
    background: transparent url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxMjAiIGhlaWdodD0iMTIwIiB2aWV3Qm94PSIwIDAgMTAwIDEwMCI+PHBhdGggZmlsbD0ibm9uZSIgZD0iTTAgMGgxMDB2MTAwSDB6Ii8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTlFOUU5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDAgLTMwKSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iIzk4OTY5NyIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgzMCAxMDUuOTggNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjOUI5OTlBIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDYwIDc1Ljk4IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0EzQTFBMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSg5MCA2NSA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNBQkE5QUEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoMTIwIDU4LjY2IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0IyQjJCMiIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgxNTAgNTQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjQkFCOEI5IiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKDE4MCA1MCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDMkMwQzEiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTE1MCA0NS45OCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNDQkNCQ0IiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTEyMCA0MS4zNCA2NSkiLz48cmVjdCB3aWR0aD0iNyIgaGVpZ2h0PSIyMCIgeD0iNDYuNSIgeT0iNDAiIGZpbGw9IiNEMkQyRDIiIHJ4PSI1IiByeT0iNSIgdHJhbnNmb3JtPSJyb3RhdGUoLTkwIDM1IDY1KSIvPjxyZWN0IHdpZHRoPSI3IiBoZWlnaHQ9IjIwIiB4PSI0Ni41IiB5PSI0MCIgZmlsbD0iI0RBREFEQSIgcng9IjUiIHJ5PSI1IiB0cmFuc2Zvcm09InJvdGF0ZSgtNjAgMjQuMDIgNjUpIi8+PHJlY3Qgd2lkdGg9IjciIGhlaWdodD0iMjAiIHg9IjQ2LjUiIHk9IjQwIiBmaWxsPSIjRTJFMkUyIiByeD0iNSIgcnk9IjUiIHRyYW5zZm9ybT0icm90YXRlKC0zMCAtNS45OCA2NSkiLz48L3N2Zz4=') no-repeat;
    background-size: 100%;
  &.lang-loading_transparent{
     background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120' viewBox='0 0 100 100'%3E%3Cpath fill='none' d='M0 0h100v100H0z'/%3E%3Crect xmlns='http://www.w3.org/2000/svg' width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.56)' rx='5' ry='5' transform='translate(0 -30)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.5)' rx='5' ry='5' transform='rotate(30 105.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.43)' rx='5' ry='5' transform='rotate(60 75.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.38)' rx='5' ry='5' transform='rotate(90 65 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.32)' rx='5' ry='5' transform='rotate(120 58.66 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.28)' rx='5' ry='5' transform='rotate(150 54.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.25)' rx='5' ry='5' transform='rotate(180 50 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.2)' rx='5' ry='5' transform='rotate(-150 45.98 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.17)' rx='5' ry='5' transform='rotate(-120 41.34 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.14)' rx='5' ry='5' transform='rotate(-90 35 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.1)' rx='5' ry='5' transform='rotate(-60 24.02 65)'/%3E%3Crect width='7' height='20' x='46.5' y='40' fill='rgba(255,255,255,.03)' rx='5' ry='5' transform='rotate(-30 -5.98 65)'/%3E%3C/svg%3E");
   }
  }

  @-webkit-keyframes langLoading {
    0% {
      transform: rotate3d(0, 0, 1, 0deg);
    }

    100% {
      transform: rotate3d(0, 0, 1, 360deg);
    }
  }

  @keyframes langLoading {
    0% {
      transform: rotate3d(0, 0, 1, 0deg);
    }

    100% {
      transform: rotate3d(0, 0, 1, 360deg);
    }
  }
</style>

Error

<template>
  <transition name="fades">
    <div class="Errormes" v-if="Errormes.show">{{Errormes.txt}}</div>
  </transition>
</template>

<script>
export default {
  data () {
    return {
      Errormes: {
        txt: '', // 提示信息
        show: false // 是否显示
      }
    }
  },
  methods: {
    ErrormesFun (oo) { // 提示弹窗
      this.Errormes.txt = oo
      this.Errormes.show = true
      setTimeout(() => {
        this.Errormes.show = false
      }, 2000)
    }
  }
}
</script>
<style lang="stylus">
  .fades-enter-active, .fades-leave-active {
    transition: opacity .5s
  }
  .fades-enter, .fades-leave-active {
    opacity: 0
  }
  /*提示弹框*/
  .Errormes {
    position: fixed;
    top: 40%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    padding: 20px 30px;
    background: rgba(0, 0, 0, .8);
    border-radius: 16px;
    color: #fff;
    font-size: 28px;
    z-index: 999;
    max-width: 80%;
    height: auto;
    line-height: 60px;
    text-align: center;
  }
</style>

然后在index.js中完成挂载

import loading from './Loading'
import Errormes from './Errormes'
const Loading_ = {}
const Toast = {}

Loading_.install = function (Vue) {
  const LoadingConstructor = Vue.extend(loading)
  const instance = new LoadingConstructor()
  instance.$mount(document.createElement('div'))
  document.body.appendChild(instance.$el)

  Vue.prototype.$showLoading = msg => {
    instance.ShowLoadingFun(msg)
  }

  Vue.prototype.$hideLoading = () => {
    instance.HideLoadingFun()
  }
}

Toast.install = function (Vue) {
  // 创建一个Vue的“子类”组件
  const ToastConstructor = Vue.extend(Errormes)
  const instance = new ToastConstructor()
  // 将这个实例挂载到动态创建的元素上,并将元素添加到全局结构中
  instance.$mount(document.createElement('div'))
  document.body.appendChild(instance.$el)

  // 在Vue的原型链上注册方法，控制组件
  Vue.prototype.$toast = (msg, duration = 2000) => {
    instance.Errormes.txt = msg
    instance.Errormes.show = true
    setTimeout(() => {
      instance.Errormes.show = false
    }, duration)
  }
}
export {Loading_,  Toast}
// main.js中
import { Loading_, Toast } from '@comp'
Vue.use(Loading_)
Vue.use(Toast)

• 使用

this.$toast('最多可上传' + this.num + '张图片，请重新上传！')
this.$showLoading()
this.$hideLoading()