请用vue3 的自定义指令写一个loading

以下是使用 Vue3 自定义指令实现 loading 的示例代码：

<template>
  <div>
    <button v-loading="loading" @click="loadData">Load Data</button>
    <div v-if="loading" class="loading-overlay">
      <div class="loading-spinner"></div>
    </div>
    <div v-else class="data-container">
      <!-- data goes here -->
    </div>
  </div>
</template>

<script>
import { ref, watch } from 'vue';

export default {
  setup() {
    const loading = ref(false);

    const loadData = () => {
      loading.value = true;

      // simulate loading data from API
      setTimeout(() => {
        loading.value = false;
      }, 2000);
    };

    return {
      loading,
      loadData,
    };
  },
  directives: {
    loading: {
      mounted(el, binding) {
        const spinner = document.createElement('div');
        spinner.classList.add('loading-spinner');

        const overlay = document.createElement('div');
        overlay.classList.add('loading-overlay');
        overlay.appendChild(spinner);

        el.appendChild(overlay);

        watch(
          () => binding.value,
          (value) => {
            if (value) {
              overlay.style.display = 'block';
            } else {
              overlay.style.display = 'none';
            }
          }
        );
      },
    },
  },
};
</script>

<style>
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.5);
  display: none;
  z-index: 999;
}

.loading-spinner {
  border-radius: 50%;
  border: 3px solid #f3f3f3;
  border-top: 3px solid #3498db;
  width: 20px;
  height: 20px;
  animation: spin 1s linear infinite;
  margin: auto;
  margin-top: calc(50% - 10px);
}

.data-container {
  /* styling for data container */
}
</style>

在上面的示例代码中，我们首先定义了一个 loading 变量，它是一个响应式的引用。我们使用 ref 函数来创建这个引用，并将其初始值设置为 false。我们还定义了一个 loadData 函数，它模拟了从 API 加载数据的过程，并在加载完成后将 loading 变量设置为 false。

在模板中，我们使用一个 v-loading 指令来实现 loading 效果。这个指令接受一个绑定值，即 loading 变量。当 loading 变量为 true 时，我们显示一个 loading 覆盖层，其中包含一个 loading 动画。当 loading 变量为 false 时，我们隐藏 loading 覆盖层，并显示数据容器。

在指令定义中，我们使用 mounted 钩子函数来初始化 loading 覆盖层。我们创建一个 loading 动画元素和一个覆盖层元素，并将它们添加到目标元素中。然后，我们使用 watch 函数来监听绑定值的变化，并在变化时显示或隐藏 loading 覆盖层。

最后，我们还添加了一些样式来定义 loading 覆盖层和 loading 动画的外观。在这个示例中，我们使用了一个简单的旋转动画来表示 loading。您可以根据需要自定义这些样式