Vue2+TS实现自定义指令：v-loading，加载就是那么简单！

2024-01-03 06:33:22

自定义指令的魅力

在Vue中，自定义指令可以扩展Vue的基本功能，从而实现更多复杂的效果。例如，我们可以自定义指令来实现加载动画、表单验证、拖拽操作等。自定义指令的开发并不复杂，但它可以极大地提升代码的可复用性和可维护性。

v-loading指令的开发

v-loading指令用于在页面加载时显示加载动画，避免页面空白的尴尬情况。它的基本用法如下：

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

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

在上面的代码中，我们定义了一个名为isLoading的数据，并在mounted钩子中设置了一个定时器，以便在1秒后将isLoading设置为false。当isLoading为true时，<div>元素就会显示加载动画，否则就会显示页面内容。

v-loading指令的实现

为了实现v-loading指令，我们需要在Vue实例中注册该指令。我们可以使用Vue.directive()方法来注册指令，如下所示：

Vue.directive('loading', {
  bind(el, binding) {
    // 指令绑定时执行
    el.style.display = binding.value ? 'none' : 'block';
  },
  update(el, binding) {
    // 指令更新时执行
    el.style.display = binding.value ? 'none' : 'block';
  },
});