vue封装全局loading指令

可以通过 Vue 自定义指令来实现全局 loading 指令，具体实现步骤如下：

1. 在 Vue 实例中注册全局指令

Vue.directive('loading', {
  // 指令选项
})

2. 在指令中定义 bind 和 unbind 钩子函数

Vue.directive('loading', {
  bind: function (el, binding, vnode) {
    // 绑定指令时执行的操作
  },
  unbind: function (el, binding, vnode) {
    // 解绑指令时执行的操作
  }
})

3. 在 bind 钩子函数中创建 loading 元素，并将其添加到页面中

Vue.directive('loading', {
  bind: function (el, binding, vnode) {
    // 创建 loading 元素
    const mask = document.createElement('div')
    mask.classList.add('loading-mask')
    const spinner = document.createElement('div')
    spinner.classList.add('loading-spinner')
    mask.appendChild(spinner)

    // 将 loading 元素添加到页面中
    el.appendChild(mask)
  },
  unbind: function (el, binding, vnode) {
    // 解绑指令时执行的操作
  }
})

4. 在 bind 钩子函数中根据指令参数 show 控制 loading 元素的显示和隐藏

Vue.directive('loading', {
  bind: function (el, binding, vnode) {
    // 创建 loading 元素
    const mask = document.createElement('div')
    mask.classList.add('loading-mask')
    const spinner = document.createElement('div')
    spinner.classList.add('loading-spinner')
    mask.appendChild(spinner)

    // 将 loading 元素添加到页面中
    el.appendChild(mask)

    // 根据指令参数 show 控制 loading 元素的显示和隐藏
    if (binding.value) {
      mask.style.display = 'block'
    } else {
      mask.style.display = 'none'
    }
  },
  update: function (el, binding, vnode, oldVnode) {
    if (binding.oldValue !== binding.value) {
      if (binding.value) {
        el.querySelector('.loading-mask').style.display = 'block'
      } else {
        el.querySelector('.loading-mask').style.display = 'none'
      }
    }
  },
  unbind: function (el, binding, vnode) {
    // 解绑指令时执行的操作
  }
})

5. 在 CSS 中定义 loading 元素的样式

.loading-mask {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.8);
  z-index: 9999;
}

.loading-spinner {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 5px solid #ccc;
  border-top-color: #333;
  animation: loading-spinner 1s linear infinite;
}

@keyframes loading-spinner {
  to {
    transform: rotate(360deg);
  }
}

最后，就可以在组件中使用 v-loading 指令来控制全局 loading 的显示和隐藏了。

<template>
  <div v-loading="isLoading">
    <!-- 页面内容 -->
  </div>
</template>

<script>
  export default {
    data() {
      return {
        isLoading: false
      }
    },
    mounted() {
      // 模拟请求数据
      this.isLoading = true
      setTimeout(() => {
        this.isLoading = false
      }, 2000)
    }
  }
</script>