vue3 写一个loading组件 并做成自定义指令

下面是一个简单的 loading 组件，可以通过自定义指令来使用：

<template>
  <div v-loading="isLoading">
    <slot></slot>
    <div v-if="isLoading" class="loading-overlay">
      <div class="loading-spinner"></div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Loading",
  props: {
    isLoading: {
      type: Boolean,
      default: false,
    },
  },
};
</script>

<style>
.loading-overlay {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  background-color: rgba(255, 255, 255, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
}

.loading-spinner {
  border: 4px solid rgba(0, 0, 0, 0.1);
  border-left-color: #7983ff;
  border-radius: 50%;
  width: 32px;
  height: 32px;
  animation: spin 1s ease-in-out infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}
</style>

然后我们在 main.js 中定义一个自定义指令：

import { createApp } from 'vue'
import App from './App.vue'

const app = createApp(App)

app.directive('loading', {
  mounted(el, binding) {
    const instance = el.__vue__ || el.__vueParentComponent__

    // 如果绑定值为 true，显示 loading
    if (binding.value) {
      instance.isLoading = true
    }

    // 如果绑定值为 false，隐藏 loading
    if (!binding.value) {
      instance.isLoading = false
    }
  },
  updated(el, binding) {
    const instance = el.__vue__ || el.__vueParentComponent__

    // 如果绑定值发生变化，更新 loading 状态
    if (binding.value !== binding.oldValue) {
      instance.isLoading = binding.value
    }
  },
})

app.mount('#app')

现在我们就可以在组件中使用 v-loading 自定义指令来控制 loading 的显示和隐藏了：

<template>
  <div v-loading="isLoading">
    <h1>My App</h1>
    <button @click="getData">Load Data</button>
    <ul v-if="data.length > 0">
      <li v-for="item in data" :key="item.id">{{ item.name }}</li>
    </ul>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      isLoading: false,
      data: [],
    };
  },
  methods: {
    getData() {
      this.isLoading = true;
      axios.get("https://jsonplaceholder.typicode.com/users").then((res) => {
        this.isLoading = false;
        this.data = res.data;
      });
    },
  },
};
</script>
``