Vue 封装 loading 自定义指令，小白也能变高手！

2023-10-31 16:29:47

前言

在前端开发中，我们经常需要在数据请求时添加加载效果，以提升用户体验。Vue 提供了自定义指令的功能，我们可以轻松地封装一个 loading 自定义指令，在需要使用的地方直接调用即可。

创建 loading 自定义指令

首先，我们创建一个新的 Vue 项目，或者在现有项目中创建一个新的 JavaScript 文件。然后，在文件中添加以下代码：

// loading.js
import Vue from 'vue'

Vue.directive('loading', {
  bind(el, binding) {
    // 创建一个新的 Vue 实例
    const vm = new Vue({
      data() {
        return {
          loading: binding.value
        }
      },
      template: `<div v-if="loading" class="loading">
        <div class="spinner">
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
          <div></div>
        </div>
      </div>`
    })

    // 将 Vue 实例挂载到元素上
    vm.$mount(el)
  },
  update(el, binding) {
    // 更新 Vue 实例的数据
    el.__vue__.loading = binding.value
  },
  unbind(el) {
    // 销毁 Vue 实例
    el.__vue__.$destroy()
  }
})

在这个文件中，我们导入了 Vue 并定义了一个名为 loading 的自定义指令。bind 方法在指令绑定到元素时被调用，我们在这里创建了一个新的 Vue 实例并将其挂载到元素上。update 方法在指令的值发生变化时被调用，我们在这里更新 Vue 实例的数据。unbind 方法在指令从元素上解绑时被调用，我们在这里销毁 Vue 实例。

使用 loading 自定义指令

现在，我们可以在项目中使用 loading 自定义指令了。在需要使用的地方，只需在元素上添加 v-loading 指令即可。例如：

<button v-loading="loading">加载中...</button>

当按钮被点击时，loading 变量的值会变成 true，从而显示加载效果。当加载完成时，loading 变量的值会变成 false，加载效果会消失。

常见问题解答

1. 如何自定义加载效果？

你可以通过修改 loading.js 文件中的 template 来自定义加载效果。例如，你可以修改 spinner 的样式，或者添加额外的元素。

2. 如何在多个元素上同时使用 loading 自定义指令？

你可以使用 v-for 指令来在多个元素上同时使用 loading 自定义指令。例如：

<div v-for="item in items">
  <button v-loading="item.loading">加载中...</button>
</div>

3. 如何在组件中使用 loading 自定义指令？

你可以在组件的 template 中使用 loading 自定义指令。例如：

<template>
  <button v-loading="loading">加载中...</button>
</template>

<script>
export default {
  data() {
    return {
      loading: false
    }
  }
}
</script>