vue2封装loading

在Vue2中封装loading可以通过自定义指令或者组件来实现。下面分别介绍这两种方式：

1. 自定义指令：

// main.js
Vue.directive('loading', {
  bind: function (el, binding) {
    const loadingText = document.createElement('span');
    loadingText.className = 'loading-text';
    loadingText.innerHTML = 'Loading...';
    
    const loadingSpinner = document.createElement('div');
    loadingSpinner.className = 'loading-spinner';

    const loadingContainer = document.createElement('div');
    loadingContainer.className = 'loading-container';
    loadingContainer.appendChild(loadingText);
    loadingContainer.appendChild(loadingSpinner);
    
    el.appendChild(loadingContainer);

    if (binding.value) {
      el.classList.add('loading');
    }
  },
  update: function (el, binding) {
    if (binding.value) {
      el.classList.add('loading');
    } else {
      el.classList.remove('loading');
    }
  }
});

// 使用指令
<template>
  <div v-loading="isLoading">
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    };
  },
  methods: {
    fetchData() {
      this.isLoading = true;
      // 发起请求
      // 请求结束后将isLoading设置为false
    }
  }
}
</script>

2. 封装组件：

<template>
  <div class="loading-container" v-if="isLoading">
    <span class="loading-text">Loading...</span>
    <div class="loading-spinner"></div>
  </div>
  <div v-else>
    <!-- 内容 -->
  </div>
</template>

<script>
export default {
  props: {
    isLoading: {
      type: Boolean,
      default: false
    }
  }
}
</script>

<style scoped>
.loading-container {
  position: relative;
}

.loading-text {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

.loading-spinner {
  /* 样式自定义 */
}
</style>

使用组件：

<template>
  <div>
    <loading :is-loading="isLoading"></loading>
    <!-- 内容 -->
  </div>
</template>

<script>
import Loading from './Loading.vue';

export default {
  components: {
    Loading
  },
  data() {
    return {
      isLoading: false
    };
  },
  methods: {
    fetchData() {
      this.isLoading = true;
      // 发起请求
      // 请求结束后将isLoading设置为false
    }
  }
}
</script>

以上就是Vue2中封装loading的两种方式，你可以根据自己的需求选择适合的方式来实现。