vue3的自定義指令directives實現(xiàn)

更新時間：2022年07月29日 09:17:51 作者：guizi0809

本文主要介紹了vue3的自定義指令directives實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧

一、什么是自定義指令

我們已經熟悉Vue內置的一系列指令，比如 v-model, v-show, v-if, v-for等等，自定義指令從命名上看主要區(qū)別于Vue自帶的內置指令，我們可以創(chuàng)建自己想要的指令，使用必須以v-為前綴

二、指令的分類

局部指令：組件中通過directives選項實現(xiàn)，只能在當前組件中使用

全局指令：應用實例的directive方法，可以在任意組件中被使用（所有內置指令都為全局指令）

三、指令的作用

代碼重用
處理普通元素的底層 DOM 訪問的邏輯

四、指令的鉤子

指令的鉤子和組件的生命周期很像，只是沒有beforeCreate

const myDirective = {
  // 在綁定元素的 attribute 前
  // 或事件監(jiān)聽器應用前調用
  created(el, binding, vnode, prevVnode) {
    // 下面會介紹各個參數(shù)的細節(jié)
  },
  // 在元素被插入到 DOM 前調用
  beforeMount() {},
  // 在綁定元素的父組件
  // 及他自己的所有子節(jié)點都掛載完成后調用
  mounted() {},
  // 綁定元素的父組件更新前調用
  beforeUpdate() {},
  // 在綁定元素的父組件
  // 及他自己的所有子節(jié)點都更新后調用
  updated() {},
  // 綁定元素的父組件卸載前調用
  beforeUnmount() {},
  // 綁定元素的父組件卸載后調用
  unmounted() {}
}

五、鉤子參數(shù)

指令的鉤子會傳遞以下幾種參數(shù)：

el：指令綁定到的元素。這可以用于直接操作 DOM。
binding：一個對象，包含以下 property：
- value：傳遞給指令的值。例如在 v-my-directive=“1 + 1” 中，值是 2。
- oldValue：之前的值，僅在 beforeUpdate 和 updated 中可用。無論值是否更改，它都可用。
- arg：傳遞給指令的參數(shù) (如果有的話)。例如在 v-my-directive:foo 中，參數(shù)是 “foo”。
- modifiers：一個包含修飾符的對象 (如果有的話)。例如在 v-my-directive.foo.bar 中，修飾符對象是 { foo: true, bar: true }。
- instance：使用該指令的組件實例。
- dir：指令的定義對象。
vnode：代表綁定元素的底層 VNode。
prevNode：之前的渲染中代表指令所綁定元素的 VNode。僅在 beforeUpdate 和 updated 鉤子中可用。

六、指令的使用

簡單需求：當某個元素掛載完成后可以自定獲取焦點

默認的實現(xiàn)方式，假如有多個地方需要使用時，這種實現(xiàn)方式的代碼會顯得繁雜冗余

<template>
  <div>
    <input type="text" ref="input" />
  </div>
</template>

<script>
import { ref, onMounted } from "vue";

export default {
  setup () {
    const input = ref(null);

    onMounted(() => {
      input.value.focus();
    })

    return {
      input
    }
  }
}
</script>

<style scoped>
</style>

使用自定義指令實現(xiàn)

<template>
  <input type="text" v-focus />
</template>
<script setup>
// 在模板中啟用 v-focus
const vFocus = {
  mounted: (el) => el.focus()
}
</script>

注：在<script setup> 中，任何以 v 開頭的駝峰式命名的變量都可以被用作一個自定義指令，vFocus 即可以在模板中以 v-focus 的形式使用

如果不使用 <script setup>，自定義指令可以通過 directives 選項注冊

<template>
  <input type="text" v-focus />
</template>
<script>
export default {
  setup() {
    /*...*/
  },
  directives: {
    focus: {
       mounted: (el) => el.focus()
    }
  }
}
</script>

也可以全局注冊該指令，這樣所有組件都可以使用v-focus

const app = createApp({})

// 使 v-focus 在所有組件中都可用
app.directive('focus', {
 	mounted: (el) => el.focus()
})

指令的參數(shù)和修飾符

假如我們使用這樣一個指令v-example

<div v-example:params.lazy="someValue"></div>

此時指令鉤子函數(shù)的binding 參數(shù)會是一個這樣的對象：

{
  arg: 'params',
  modifiers: { lazy: true },
  value: /* `someValue` 的值 */,
  oldValue: /* 上一次更新時 `someValue` 的值 */
}

也就是說指令:后面跟著的是指令的參數(shù)，.后面跟著的是指令的修飾符

簡單示例一：

背景高亮

<template>
  <div>
    <div v-highlight>默認的高亮顏色</div>
    <div v-highlight="{ bgColor: 'red', color: 'yellow' }">這是一個簡單的例子</div>
  </div>
</template>
<script>
export default {
  setup() {
    /*...*/
  },
  directives: {
    highlight: {
      mounted(el, binding) {
        console.log('binding', binding)
        const color = binding.value && binding.value.color ? binding.value.color : '#fff'
        const bgColor = binding.value && binding.value.bgColor ? binding.value.bgColor : 'blue'
        el.style.color = color
        el.style.backgroundColor = bgColor
      }
    }
  }
}
</script>

在這里插入圖片描述

簡單示例二：

<template>
  <div>
    <div v-letter:uppercase>hello world</div>
  </div>
</template>
<script>
export default {
  setup() {
    /*...*/
  },
  directives: {
    letter: {
      mounted(el, binding) {
        const text = el.innerHTML
        if (binding.arg === 'uppercase') {
          el.innerHTML = text.toUpperCase()
        } else if (binding.arg === 'lowercase') {
          el.innerHTML = text.toLowerCase()
        } else {
          el.innerHTML = text.split('')
        }
      }
    }
  }
}
</script>

在這里插入圖片描述