vue3写一个loading的自定义指令并挂在到mainjs上

在Vue3中，可以使用app.directive方法来注册自定义指令。

首先，在main.js文件中导入Vue并创建一个Vue实例：

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

const app = createApp(App)

// 在这里注册自定义指令
// ...

app.mount('#app')

然后，可以使用app.directive方法来注册自定义指令。以下是一个简单的loading指令示例：

app.directive('loading', {
  mounted(el, binding) {
    el.innerHTML = `
      <div class="loading-wrapper">
        <div class="loading-spinner"></div>
        <div class="loading-text">${binding.value || 'Loading...'}</div>
      </div>
    `
  }
})

以上代码中，我们定义了一个名为loading的指令，它会在元素挂载时将其内容替换为一个loading的HTML结构。指令的参数可以通过binding.value获取，如果没有传递参数，则默认显示Loading...。

最后，我们将这个Vue实例挂载到页面上：

app.mount('#app')

现在，我们就可以在Vue组件中使用v-loading指令了：

<template>
  <div v-loading="isLoading">
    <!-- 页面内容 -->
  </div>
</template>

<script>
export default {
  data() {
    return {
      isLoading: true
    }
  },
  mounted() {
    setTimeout(() => {
      this.isLoading = false
    }, 3000)
  }
}
</script>

在上面的代码中，我们在组件中使用了v-loading指令，并将其绑定到isLoading变量上。在组件挂载后，我们使用setTimeout模拟了一个3秒钟的loading过程，然后将isLoading变量设置为false，从而隐藏loading