vue封装loading指令

可以通过 Vue 自定义指令来实现 loading 指令的封装。

代码示例：

// 定义 loading 指令
Vue.directive('loading', {
  // 当被绑定的元素插入到 DOM 中时
  inserted: function(el, binding) {
    // 创建 loading 元素
    const loadingEl = document.createElement('div')
    loadingEl.className = 'loading-wrapper'
    loadingEl.innerHTML = '<div class="loading"></div>'
    // 根据传入的参数设置 loading 框的样式
    if (binding.value && typeof binding.value === 'object') {
      const { color, size } = binding.value
      loadingEl.querySelector('.loading').style.borderTopColor = color || '#fff'
      loadingEl.querySelector('.loading').style.width = size || '20px'
      loadingEl.querySelector('.loading').style.height = size || '20px'
    }
    // 将 loading 元素添加到被绑定的元素中
    el.appendChild(loadingEl)
    // 设置被绑定元素的 position 属性为 relative，以便让 loading 元素以相对于被绑定元素的位置进行定位
    el.style.position = 'relative'
  },
  // 当指令所在的组件的 VNode 更新时调用
  update: function(el, binding) {
    // 如果传入的值为 true，则显示 loading 元素；否则隐藏 loading 元素
    if (binding.value) {
      el.querySelector('.loading-wrapper').style.display = 'block'
    } else {
      el.querySelector('.loading-wrapper').style.display = 'none'
    }
  }
})

在上述代码中，我们定义了一个名为 `loading` 的指令，当该指令绑定到某个元素上时，会在该元素下方添加一个 loading 框。当传入的值为 true 时，显示 loading 框，否则隐藏 loading 框。同时，我们还可以通过传入参数来自定义 loading 框的样式。

在组件中使用该指令，示例代码如下：

<template>
  <div v-loading="isLoading"></div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    }
  },
  methods: {
    fetchData() {
      this.isLoading = true
      // 发送请求
      // 请求成功后，将 isLoading 设为 false
    }
  }
}
</script>

在上述代码中，我们将 `isLoading` 变量绑定到 `v-loading` 指令上，当 `isLoading` 为 true 时，loading 框会显示出来。在发送请求前，我们将 `isLoading` 设为 true，请求成功后再将其设为 false，这样就可以在请求过程中显示 loading 框了。