如何在vuejs中显示自定义加载栏并通过自定义指令进行控制？

// main.js
Vue.directive('loading', {
  bind: function (el, binding) {
    // 创建一个加载栏元素，并设置样式
    const loadingBar = document.createElement('div');
    loadingBar.className = 'loading-bar';
    loadingBar.style.display = 'none';
    // 将加载栏元素添加到页面中
    el.appendChild(loadingBar);

    // 根据指令的值控制加载栏的显示和隐藏
    if (binding.value) {
      loadingBar.style.display = 'block';
    } else {
      loadingBar.style.display = 'none';
    }
  },
  update: function (el, binding) {
    // 根据指令的值更新加载栏的显示和隐藏
    if (binding.value) {
      el.querySelector('.loading-bar').style.display = 'block';
    } else {
      el.querySelector('.loading-bar').style.display = 'none';
    }
  }
});

<template>
  <div>
    <div v-loading="isLoading">内容区域</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: false
    };
  },
  methods: {
    fetchData() {
      this.isLoading = true;
      // 模拟异步请求
      setTimeout(() => {
        this.isLoading = false;
      }, 2000);
    }
  }
};
</script>

<style>
.loading-bar {
  width: 100%;
  height: 2px;
  background-color: #ccc;
  position: absolute;
  top: 0;
  left: 0;
  transition: width 0.3s;
}

.loading-bar::after {
  content: '';
  display: block;
  width: 0;
  height: 100%;
  background-color: #007bff;
  transition: width 0.3s;
}

.loading-bar.loading::after {
  width: 100%;
}
</style>