vue自定义指令directive实现接口请求转圈的加载效果

封装个自定义指令v-Loading实现接口请求前，调用元素在一直转圈的效果，当然ele-UI也有类似的组件，我们是为了实现下，避免有特殊的业务要求，不多说，上代码，先看效果

vue中配合jq实现的 jq比较少 项目中要是没jq的 可以直接把用到的一行换成原生的就行

/** 注册一个全局指令v-loading */
import Vue from 'vue'

// 插入dom
function insertLoadingDom (el) {
  el.style.position = 'relative'
  // const div = document.createElement('div')
  // div.setAttribute('id', 'loading__child')
  // div.style.cssText = 'position: absolute;left: 0;right: 0;bottom: 0;top: 0;z-index: 999;background: #000;opacity: .5;color: #ffffff;'
  // div.innerHTML = '<span style="position: absolute;top: 50%;left: 50%;transform: translate(-50%,-50%);">loading...</span>'
  // el.appendChild(div)
  const loadDiv = `<div style="width: 100%;height: 100%;position: absolute;background: #ffffff;top:0;left: 0">
                        <div style="color: #000;font-size: 14px;height:100%;width:100%;font-weight: 400;display: flex;justify-content: center;align-items: center">
                            <div class="loadingImg"></div>
                            <div style="margin-left: 6px">正在加载中...</div>
                        </div>
                   </div>`
  $(el).append(loadDiv);
}

// 删除dom
function removeLoadingDom (el) {
  const div = el.querySelector('#loading__child')
  el.removeChild(div)
}

Vue.directive('Loading', {
  // 当被绑定的元素插入到 DOM 中时……
  inserted: function (el, binding) {
    if (binding.value) {
      insertLoadingDom(el)
    }
  },
  update: function (el, binding) {
    if (binding.value) {
      removeLoadingDom(el)
    } else {
      insertLoadingDom(el)
    }
  }
})

还有个转圈动画的实现，去iconfont拿一个半圆的空心圆就行，

<style lang="less">
  .loadingImg{
    width: 16px;
    height: 16px;
    background: url("./assets/img/loading.png") no-repeat;
    background-size: 100% 100%;
    animation: rotate 2s linear infinite;

  }
  @keyframes rotate {
    100% {
      transform: rotate(360deg);
    }
  }
</style>

具体怎么用自定义指令~就不说了吧，各位看官自行补充知识。

该条为vue版本，后面封装个原生基于jq版本的