vue3 自定义指令

// 自定义指令示例代码

// 1. 全局自定义指令
import { createApp } from 'vue';

const app = createApp({});

app.directive('focus', {
  // 指令的定义
  mounted(el) {
    // 聚焦元素
    el.focus();
  }
});

// 2. 局部自定义指令
const app = createApp({
  data() {
    return {
      message: 'Hello!'
    }
  },
  directives: {
    focus: {
      // 指令的定义
      mounted(el) {
        // 聚焦元素
        el.focus();
      }
    }
  }
});

// 3. 更复杂的自定义指令，包含多个钩子函数
app.directive('color', {
  created(el, binding, vnode, prevVnode) {
    console.log('指令已绑定');
  },
  beforeMount(el, binding, vnode, prevVnode) {
    console.log('组件挂载之前');
  },
  mounted(el, binding, vnode, prevVnode) {
    // 改变元素背景颜色
    el.style.backgroundColor = binding.value;
  },
  beforeUpdate(el, binding, vnode, prevVnode) {
    console.log('组件更新之前');
  },
  updated(el, binding, vnode, prevVnode) {
    console.log('组件已更新');
  },
  beforeUnmount(el, binding, vnode, prevVnode) {
    console.log('组件卸载之前');
  },
  unmounted(el, binding, vnode, prevVnode) {
    console.log('组件已卸载');
  }
});

// 使用自定义指令
<template>
  <input v-focus />
  <div v-color="'red'">This div has a red background</div>
</template>

解释说明：

1. 全局自定义指令：

   • 使用 app.directive() 方法注册一个全局指令。
   • 在这个例子中，我们创建了一个名为 v-focus 的指令，它会在元素挂载后自动聚焦。

2. 局部自定义指令：

   • 在组件选项中使用 directives 字段来定义局部指令。
   • 这里的 v-focus 指令仅在当前组件中可用。

3. 更复杂的自定义指令：

   • 包含多个生命周期钩子函数（如 created, beforeMount, mounted, beforeUpdate, updated, beforeUnmount, unmounted）。
   • 在这个例子中，v-color 指令会根据传入的颜色值改变元素的背景颜色，并且会在不同的生命周期阶段输出日志信息。

4. 使用自定义指令：

   • 在模板中通过 v- 前缀使用自定义指令，例如 v-focus 和 v-color。