vue 2 全局封装 loading 组件

注册组件

main.js 引入 封装好的方法
使用 Vue.use(loading) 注册组件

书写封装方法

import Vue from 'vue'
import loading from './loading.vue'  // loading 样式

let $app = Vue.extend(loading) 在 vue 中注册loading组件
let $loading = new $app().$mount(document.createElement('div'))
创建 loading 实例并挂载 vue 实例上
document.body.appendChild($loading.$el)

export default {
  install (vm) {
    vm.prototype.$loading = {
      show: (options) => {
        Object.keys(options).forEach(item => {
          $loading[item] = options[item]
        })
        $loading.isShow = true
      },
      hide: () => {
        $loading.isShow = false
      }
    }
  }
}

组件样式和方法

<template lang='pug'>
  .loading(v-if='isShow')
    .loading-content
      img.img(width='24' height='24' src='./loading.gif&#