Vue自定义指令

将一个自定义指令全局注册到应用层级也是一种常见的做法：

const app = createApp({})

// 使 v-focus 在所有组件中都可用
app.directive('focus', {
  /* ... */
})

一个指令的定义对象可以提供几种钩子函数 (都是可选的)：

// vue2.x
const myDirective = {
 
  // 在绑定元素的父组件 及他自己的所有子节点都挂载完成后调用
  bind(el, binding, vnode, prevVnode) {},
  
  // 在绑定元素的父组件 及他自己的所有子节点都更新后调用
  update(el, binding, vnode, prevVnode) {},
 	
  unbind(el, binding, vnode, prevVnode) {}
}

// vue3.x
const myDirective = {
 
  // 在绑定元素的父组件
  // 及他自己的所有子节点都挂载完成后调用
  mounted(el, binding, vnode, prevVnode) {},
  
  // 在绑定元素的父组件
  // 及他自己的所有子节点都更新后调用
  updated(el, binding, vnode, prevVnode) {},
  
  // 绑定元素的父组件卸载后调用
  unmounted(el, binding, vnode, prevVnode) {}
}

• el：指令绑定到的元素。这可以用于直接操作 DOM。

• binding：一个对象，包含以下属性。

  value：传递给指令的值。例如在 v-my-directive="1 + 1" 中，值是 2。

  oldValue：之前的值，仅在 beforeUpdate 和 updated 中可用。无论值是否更改，它都可用。

  arg：传递给指令的参数 (如果有的话)。例如在 v-my-directive:foo 中，参数是 "foo"。

  modifiers：一个包含修饰符的对象 (如果有的话)。例如在 v-my-directive.foo.bar 中，修饰符对象是 { foo: true, bar: true }。

  instance：使用该指令的组件实例。

  dir：指令的定义对象。

• vnode：代表绑定元素的底层 VNode。

• prevNode：之前的渲染中代表指令所绑定元素的 VNode。仅在 beforeUpdate 和 updated 钩子中可用。

除了 el 外，其他参数都是只读的，不要更改它们。若你需要在不同的钩子间共享信息，推荐通过元素的 dataset attribute 实现。

简化形式

对于自定义指令来说，一个很常见的情况是仅仅需要在 mounted 和 updated 上实现相同的行为，除此之外并不需要其他钩子。这种情况下我们可以直接用一个函数来定义指令，如下所示：

<div v-color="color"></div>

app.directive('color', (el, binding) => {
  // 这会在 `mounted` 和 `updated` 时都调用
  el.style.color = binding.value
})

例子：tab切换

// tab.vue
<script setup>
import { ref } from 'vue';

const index = ref(0);
const tabs = ref(['tab1', 'tab2', 'tab3'])
const changeTab = (v) => {
  index.value = v;
}

</script>

<template>
  <div class="tabWrapper" v-tab="{
    cIndex: index,
    className: 'tab',
    activeClass: 'active'
  }">
    <template v-for="(tab, i) in tabs" :key="tab">
      <div class="tab" @click="changeTab(i)">{{ tab }}</div>
    </template>
  </div>
</template>
<style lang="scss">
.tabWrapper {
  display: flex;

  .tab {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 50px;
    width: 100px;
    border: 1px solid #ccc;
    cursor: pointer;

    &:nth-child(2) {
      border-left: none;
      border-right: none;
    }

    &.active {
      background-color: green;
      color: #ffffff;
    }
  }
}
</style>

// src/directives/tab.js
const VTab = {
  mounted(el, binding) {
    const { cIndex, activeClass, className } = binding.value;
    const tabItems = el.getElementsByClassName(className);
    tabItems[cIndex].className += ` ${activeClass}`;
  },
  updated(el, binding) {
    const { cIndex: oldCIndex } = binding.oldValue;
    const { cIndex, activeClass, className } = binding.value;

    const tabItems = el.getElementsByClassName(className);
    tabItems[oldCIndex].className = className;
    tabItems[cIndex].className += ` ${activeClass}`;
  }
}

export default VTab;

// src/directives/index.js
import tab from "./tab";

const loadDirectives = (app) => {
  app.directive('tab', tab);
}

export default loadDirectives;

// main.js
import { createApp } from 'vue'
import App from './App.vue';
import loadDirectives from './directives';

const app = createApp(App);
loadDirectives(app);
app.mount('#app')

使用场景：

• 按钮权限 v-has
• 图片懒加载 v-lazy
• 防抖 V-debounce
• 拖拽指令 v-draggable mousemove. mouseup monsedown.dragenter、dragover、drop。