vue2.x与vue3.x中自定义指令详解(最新推荐)

Vue2.x 与 Vue3.x 中自定义指令详解

Vue 提供了自定义指令的功能，可以用来处理 DOM 元素及其属性的问题，使得我们可以更加灵活地操作 DOM 元素。下面就是 Vue2.x 和 Vue3.x 中如何自定义指令的详解。

Vue2.x 中自定义指令

在 Vue2.x 中，我们可以使用 Vue.directive() 方法来自定义指令。

定义指令

下面是一个简单的例子，我们定义了一个自定义指令 focus，用来在元素插入到 DOM 树中时，自动让元素获得焦点：

<template>
  <input v-focus />
</template>

Vue.directive('focus', {
  inserted: function(el) {
    el.focus()
  }
})

在上面的代码中，我们使用 Vue.directive() 方法来定义了一个名为 focus 的自定义指令。该指令定义了一个钩子函数 inserted，在绑定元素插入到 DOM 树中时，触发该函数。在该函数中，我们调用元素的 focus() 方法，使其获得焦点。

使用指令

我们可以使用 v- 前缀来使用自定义指令。例如，在上面的例子中，我们在 <input> 元素上使用了 v-focus 指令。

<input v-focus />

这样，在该元素插入到 DOM 树中时，该元素就会获得焦点。

指令的钩子函数

在 Vue2.x 中，自定义指令可以定义以下钩子函数：

• bind：只调用一次，指令第一次绑定到元素时调用。
• inserted：被绑定元素插入父节点时调用。
• update：被绑定元素所在的模板更新时调用，而不论绑定值是否变化。
• componentUpdated：被绑定元素所在的模板完成一次更新周期时调用。
• unbind：只调用一次，指令与元素解绑时调用。

指令的参数与修饰符

自定义指令可以接受参数和修饰符。

下面是一个接受参数的自定义指令示例：

<template>
  <input v-focus="true" />
</template>

Vue.directive('focus', {
  inserted: function(el, binding) {
    if(binding.value === true){
      el.focus()
    }
  }
})

在上面的示例中，我们在 v-focus 指令中传递了参数 true。在指令的钩子函数 inserted 中，我们通过 binding 参数获得了该指令的参数 true。如果参数是 true，则让元素获得焦点。

下面是一个使用修饰符的自定义指令示例：

<template>
  <input v-focus.autofocus />
</template>

Vue.directive('focus', {
  inserted: function(el, binding) {
    if(binding.modifiers.autofocus){
      el.focus()
    }
  }
})

在上面的示例中，我们在 v-focus 指令中使用了修饰符 .autofocus。在指令的钩子函数 inserted 中，我们通过 binding 参数获得了该指令的修饰符。如果有修饰符 .autofocus，则让元素获得焦点。

Vue3.x 中自定义指令

在 Vue3.x 中，我们使用 app.directive() 方法来自定义指令。

定义指令

下面是一个简单的例子，我们定义了一个自定义指令 focus，用来在元素插入到 DOM 树中时，自动让元素获得焦点：

<template>
  <input v-focus />
</template>

app.directive('focus', {
  mounted: function(el) {
    el.focus()
  }
})

在上面的代码中，我们使用 app.directive() 方法来定义了一个名为 focus 的自定义指令。该指令定义了一个钩子函数 mounted，在元素挂载到 DOM 树上时，触发该函数。在该函数中，我们调用元素的 focus() 方法，使其获得焦点。

使用指令

我们可以使用 v- 前缀来使用自定义指令。例如，在上面的例子中，我们在 <input> 元素上使用了 v-focus 指令。

<input v-focus />

这样，在该元素插入到 DOM 树中时，该元素就会获得焦点。

指令的钩子函数

在 Vue3.x 中，自定义指令可以定义以下钩子函数：

• beforeMount：在挂载之前调用。
• mounted：在挂载时调用。
• beforeUpdate：在更新之前调用，发生在数据更新之前。
• updated：在更新之后调用，发生在数据更新之后。
• beforeUnmount：在卸载之前调用。
• unmounted：在卸载时调用。

指令的参数与修饰符

自定义指令可以接受参数和修饰符。

下面是一个接受参数的自定义指令示例：

<template>
  <input v-focus="true" />
</template>

app.directive('focus', {
  mounted: function(el, binding) {
    if(binding.value === true){
      el.focus()
    }
  }
})

在上面的示例中，我们在 v-focus 指令中传递了参数 true。在指令的钩子函数 mounted 中，我们通过 binding 参数获得了该指令的参数 true。如果参数是 true，则让元素获得焦点。

下面是一个使用修饰符的自定义指令示例：

<template>
  <input v-focus.autofocus />
</template>

app.directive('focus', {
  mounted: function(el, binding) {
    if(binding.modifiers.autofocus){
      el.focus()
    }
  }
})

在上面的示例中，我们在 v-focus 指令中使用了修饰符 .autofocus。在指令的钩子函数 mounted 中，我们通过 binding 参数获得了该指令的修饰符。如果有修饰符 .autofocus，则让元素获得焦点。

示例

下面是一个在 Vue3.x 中自定义一个可以拖动的元素的示例。

HTML

<template>
  <div class="box" v-draggable>
    <p>我可以拖动</p>
  </div>
</template>

我们在一个 div 元素上使用 v-draggable 自定义指令，这个元素拥有类名为 box。

CSS

.box {
  cursor: move;
  position: absolute;
  top: 100px;
  left: 100px;
}

首先，我们设置了 div.box 元素的位置和鼠标样式。

JavaScript

app.directive('draggable', {
  mounted: function(el) {
    let positon = {x: 0, y: 0}

    el.addEventListener('mousedown', function(e) {
      positon.x = e.clientX - el.offsetLeft
      positon.y = e.clientY - el.offsetTop

      document.addEventListener('mousemove', move)
      document.addEventListener('mouseup', stop)
    })

    function move(e) {
      el.style.left = e.clientX - positon.x + 'px'
      el.style.top = e.clientY - positon.y + 'px'
    }

    function stop() {
      document.removeEventListener('mousemove', move)
      document.removeEventListener('mouseup', stop)
    }
  }
})

在自定义指令钩子函数 mounted 中，我们绑定了 mousedown 事件，在元素上点击鼠标左键时触发。在触发事件时，记录下鼠标的位置和元素的偏移值。然后监听 mousemove 和 mouseup 事件，并调用 move 和 stop 函数来实现元素的位置移动。

参考文献

• Vue.js 官方文档 - 自定义指令
• Vue.js 3.0 中文文档 - 自定义指令