vue自定义loading指令

vue自定义loading指令，在元素上使用你v-loading可显示数据加载时动画，数据加载后消失
分为三个文件：
loading.vue（loading样式主体）
loading.js（自定义指令相关方法）
index.js（指令注册到全局）
使用方法

以下具体代码：

loading.vue

src/components/loading/loading.vue

<template>
  <div
    v-show="visible"
    :class="['yr-loading', {'yr-loading-FullScreen': fullscreen, 'yr-loading-sm': small}]"
    :style="{ background: background, top: topH + 'px', minHeight: minH + 'px' }"
  >
    <div class="mask-con">
      <div class="boxes">
        <div class="box" v-for="i in 4" :key="i">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>
      <div class="box-tip" :style="{color: color, fontSize: fontSize + 'px'}">{{langua[lang]['loadingTip']}}...</div>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      visible: false,
      langua: {
        'zh-CN': {
          'loadingTip': '加载中'
        }
      },
      fullscreen: false,
      background: '#fff',
      fontSize: 14,
      color: '#1E1E1E',
      topH: 0,
      small: false,
      minH: 160
    }
  },
  computed: {
    lang () {
      return localStorage.getItem('localeLanguage') || 'zh-TW'
    }
  },
  mounted () {
    if (this.fullscreen) {
      document.body.style.overflow = 'hidden'
    }
  },
  destroyed () {
    document.body.style.overflowX = 'hidden'
  }
}
</script>

<style lang="less" scoped>
@color: #5C8DF6;
@colorRight: darken(@color, 15%);
@colorLeft: darken(@color, 5%);
@shadow: #DBE3F4;
@size: 25px;
@duration:800ms;
@top: auto;
@right: auto;
@bottom: auto;
@left: auto;
@rotateY: 0deg;
@rotateX: 0deg;
@translateZ: calc(@size / 2);
.yr-loading {
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  z-index: 900;
  background: #fff;
  transition: opacity .3s;
  width: 100%;
  height: 100%;
  position: absolute;
  min-width: 100%;
  .boxes {
    height: calc(@size * 2);
    width: calc(@size * 3);
    position: relative;
    transform-style: preserve-3d;
    transform-origin: 50% 50%;
    margin-top: calc(@size * .2 * -1);
    transform: rotateX(60deg) rotateZ(45deg) rotateY(0deg) translateZ(0px);
    .box {
      width: @size;
      height: @size;
      top: 0;
      left: 0;
      position: absolute;
      transform-style: preserve-3d;
      &:nth-child(1) {
        transform: translate(100%, 0);
        animation: box1 @duration linear infinite;
      }
      &:nth-child(2) {
        transform: translate(0, 100%);
        animation: box2 @duration linear infinite;
      }
      &:nth-child(3) {
        transform: translate(100%, 100%);
        animation: box3 @duration linear infinite;
      }
      &:nth-child(4) {
        transform: translate(200%, 0);
        animation: box4 @duration linear infinite;
      }
      & > div {
        background: @color;
        position: absolute;
        width: 100%;
        height: 100%;
        background: @color;
        top: @top;
        right: @right;
        bottom: @bottom;
        left: @left;
        transform: rotateY(@rotateY) rotateX(@rotateX) translateZ(@translateZ);
        &:nth-child(1) {
          top: 0;
          left: 0;
        }
        &:nth-child(2) {
          background: @colorRight;
          right: 0;
          transform: rotateY(90deg) rotateX(@rotateX) translateZ(@translateZ);
        }
        &:nth-child(3) {
          background: @colorLeft;
          transform: rotateY(@rotateY) rotateX(-90deg) translateZ(@translateZ);
        }
        &:nth-child(4) {
          background: @shadow;
          top: 0;
          left: 0;
          transform: rotateY(@rotateY) rotateX(@rotateX) translateZ(calc(@size * 3 * -1));
        }
      }
    }
  }
  .box-tip {
    margin-top: calc(@size * 3.2);
    color: #1E1E1E;
    font-size: 14px;
  }
  &.yr-loading-sm {
    @smSize: 15px;
    @translateZSm: calc(@smSize / 2);
    margin-top: 0;
    .boxes {
      height: calc(@smSize * 2);
      width: calc(@smSize * 3);
      margin-top: calc(@smSize * .2 * -1);
      .box {
        width: @smSize;
        height: @smSize;
        & > div {
            transform: rotateY(@rotateY) rotateX(@rotateX) translateZ(@translateZSm);
            &:nth-child(2) {
                transform: rotateY(90deg) rotateX(@rotateX) translateZ(@translateZSm);
            }
            &:nth-child(3) {
                transform: rotateY(@rotateY) rotateX(-90deg) translateZ(@translateZSm);
            }
            &:nth-child(4) {
                transform: rotateY(@rotateY) rotateX(@rotateX) translateZ(calc(@smSize * 3 * -1));
            }
        }
      }
    }
    .box-tip {
      margin-top: calc(@smSize * 3.2);
    }
  }
}
.yr-loading-FullScreen {
  .yr-loading();
  width: 100vw;
  height: 100vh;
  top: 0;
  background: rgba(0, 0, 0, 0.4);
  .mask-con {
    background: #fff;
    border-radius: 4px;
    width: 180px;
    height: 200px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
  }
}
@keyframes box1 {
  0%,
  50% {
    transform: translate(100%, 0);
  }
  100% {
    transform: translate(200%, 0);
  }
}

@keyframes box2 {
  0%{
    transform: translate(0, 100%);
  }
  50% {
    transform: translate(0, 0);
  }
  100% {
    transform: translate(100%, 0);
  }
}

@keyframes box3 {
  0%,
  50% {
    transform: translate(100%, 100%);
  }
  100% {
    transform: translate(0, 100%);
  }
}

@keyframes box4 {
  0%{
    transform: translate(200%, 0);
  }
  50% {
    transform: translate(200%, 100%);
  }
  100% {
    transform: translate(100%, 100%);
  }
}
</style>

loading.js

src/components/loading/loading.js

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

Vue.component('yrLoading', Loading)

const Mask = Vue.extend(Loading)

const toggleLoading = (el, binding, vnode) => {
  const parentEle = el
  if ((typeof binding.value === 'boolean' && binding.value) || (binding.value.loading)) {
    Vue.nextTick(() => {
      parentEle.classList.add('loading')
      // 控制loading组件显示
      el.instance.visible = true
      if (binding.modifiers.fullscreen) { // 全屏情况下
        el.mask.style.top = 0
        // el.instance.fullscreen = true
        document.body.style.overflow = 'hidden'
        document.body.appendChild(el.mask)
      } else { // 非全屏情况下
        // el.instance.fullscreen = false
        let height = el.clientHeight // 当前元素高度
        let width = el.clientWidth // 当前元素宽度
        // let offsetTop = el.offsetTop // 当前元素距离顶部距离
        // console.log(el, width, height, el.instance.topH)
        el.style.position = 'relative'
        // 给蒙版赋值
        if (Array.from(el.classList).includes('yr-table') || binding.modifiers.table) { // 如果是table组件，设置距离table顶部thead的距离
          const tableHeadHeight = el.getElementsByTagName('thead')[0].clientHeight
          el.mask.style.top = tableHeadHeight + 'px'
          el.mask.style.height = (height - tableHeadHeight) + 'px'
        } else {
          // el.mask.style.top = offsetTop + "px"
          el.mask.style.height = (height - el.instance.topH) + 'px'
        }
        el.mask.style.width = width + 'px'
        el.appendChild(el.mask)
      }
    })
  } else {
    // 移除节点
    parentEle.classList.remove('loading')
    el.mask && el.mask.parentNode && el.mask.parentNode.removeChild(el.mask)
    el.instance.visible = false
  }
}

export default {
  // 只调用一次，指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。
  bind: function (el, binding) {
    let background = binding.value.background
    let color = binding.value.color
    let fontSize = binding.value.fontSize
    let topH = binding.value.topH
    let small = binding.value.small
    let minH = binding.value.minH
    const mask = new Mask({
      el: document.createElement('div'),
      data: {
        fullscreen: !!binding.modifiers.fullscreen,
        background: background || '#fff',
        color: color || null,
        fontSize: fontSize || 14,
        topH: topH || 0,
        small: small,
        minH: minH || 600
      }
    })
    el.instance = mask
    el.mask = mask.$el
    // el.maskStyle = {}
    binding.value && toggleLoading(el, binding)
  },
  // 被绑定元素插入父节点时调用 (仅保证父节点存在，但不一定已被插入文档中)。
  inserted: function (el, binding, vnode, oldVnode) {
    // console.log("元素插入的时候");
  },
  // 所在组件的 VNode 更新时调用
  update: function (el, binding) {
    if (binding.oldValue !== binding.value) {
      toggleLoading(el, binding)
    }
  },
  // 指令所在组件的 VNode 及其子 VNode 全部更新后调用
  componentUpdated () {
    // console.log("渲染完成了");
  },
  // 只调用一次，指令与元素解绑时调用
  unbind: function (el, binding) {
    el.mask && el.mask.parentNode && el.mask.parentNode.removeChild(el.mask)
    el.instance && el.instance.$destroy()
  }
}

index.js

src/components/loading/index.js

import loading from './loading'

export default {
  install (Vue) {
    Vue.directive('loading', loading)
  }
}

在入口文件src/main.js中引用loading

import loading from '@/components/loading'
Vue.use(loading)

组件内使用

<div class="loading-wrap" v-loading="{loading: isLoading}"></div>

全屏loading： v-loading.fullscreen

<div class="loading-wrap" v-loading.fullscreen="{loading: isLoading}"></div>

v-loading参数：Boolean值或Object对象
对象内可设置参数 {
loading: false, // 是否显示loading
background: ‘#fff’, // 蒙版背景色
color: null, // 提示文字颜色
fontSize: 14, // 提示文字大小
topH: 0, // loading距离父元素top值
small: small, // loading显示动画元素大小
minH: minH // loading最小高度
}