自定义指令-花瓣加载组件

花瓣效果如下，当然是一直转动的

 目录结构

src目录下新增directive目录，用来存放自定义指令

 新建loading目录，里面存放如下文件index.js    loadingComponent 文件夹

 loadingComponent 里面存放如下文件 index.js  loadingComponent .vue（加载组件）

 loadingComponent .vue

 loadingComponent/index.js

import Vue from 'vue'
import Loading from './LoadingComponent.vue'

const Mask = Vue.extend(Loading)

const toggleLoading = (el, binding) => {
  if (binding.value) {
    Vue.nextTick(() => {
      // 控制loading组件显示
      el.instance.visible = true
      // 插入到目标元素
      insertDom(el, el,)
    })
  } else {
    el.instance.visible = false
  }
}

const insertDom = (parent, el) => {
  parent.appendChild(el.mask)
}

export default {
  bind: function (el, binding, vnode) {
    const mask = new Mask({
      el: document.createElement('div'),
      data () {}
    })
    el.instance = mask
    el.mask = mask.$el
    el.maskStyle = {}
    binding.value && toggleLoading(el, binding)
  },
  update: function (el, binding) {
    if (binding.oldValue !== binding.value) {
      toggleLoading(el, binding)
    }
  },
  unbind: function (el, binding) {
    el.instance && el.instance.$destroy()
  }
}

import Vue from 'vue';
import Loading from './loadingComponent'
export default {
  install(Vue) {
    Vue.directive('myLoading', Loading)
  }
}

以上操作完成后再main.js里面引入

main.js

import DirectiveLoading from '@/directive/loading' //权限控制指令
Vue.use( DirectiveLoading )

页面上的使用v-myLoading

 效果如下：

 具体的模板自己修改为喜欢的样式即可。