Vue3 自定义 Loading 指令：简单易用，提升用户体验

在 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。