Vue3 自定义指令完整教程

什么是Vue3自定义指令？

Vue3自定义指令是一种强大的功能，允许开发者直接操作DOM元素。与组件不同，指令更适合用于低级别的DOM操作。

自定义指令可以用于各种场景，如表单验证、图片懒加载、权限控制、动画效果等。Vue3中的指令API与Vue2相比有了一些变化，但核心概念保持一致。

提示：指令特别适合封装那些需要在多个组件中重复使用的DOM操作逻辑。

基础自定义指令

指令注册

在Vue3中注册全局指令和局部指令的方法：

// 全局指令
app.directive('focus', {
  mounted(el) {
    el.focus()
  }
})

// 局部指令
const myDirective = {
  mounted(el, binding) {
    // 指令逻辑
  }
}

指令生命周期

Vue3指令的生命周期钩子：

beforeMount - 元素插入DOM前调用
mounted - 元素插入DOM后调用
beforeUpdate - 元素更新前调用
updated - 元素更新后调用
beforeUnmount - 元素卸载前调用
unmounted - 元素卸载后调用

指令参数

指令可以接收多种参数：

绑定值

<div v-my-directive="someValue"></div>

// 在指令中通过binding.value访问
mounted(el, binding) {
  console.log(binding.value) // => someValue
}

参数和修饰符

<div v-my-directive:arg.modifier="value"></div>

// 在指令中访问
mounted(el, binding) {
  console.log(binding.arg)    // => "arg"
  console.log(binding.modifiers) // => { modifier: true }
}

基础指令示例

1. 自动聚焦指令

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

2. 颜色指令

这段文字会变成红色

app.directive('color', {
  mounted(el, binding) {
    el.style.color = binding.value
  }
})

高级自定义指令

动态参数指令

指令参数可以是动态的：

<div v-pin:[direction]="200">固定位置元素</div>

data() {
  return {
    direction: 'top'
  }
}

app.directive('pin', {
  mounted(el, binding) {
    el.style.position = 'fixed'
    const s = binding.arg || 'top'
    el.style[s] = binding.value + 'px'
  },
  updated(el, binding) {
    const s = binding.arg || 'top'
    el.style[s] = binding.value + 'px'
  }
})

函数简写

当只需要mounted和updated钩子时，可以使用简写：

app.directive('color', (el, binding) => {
  el.style.color = binding.value
})

// 等同于
app.directive('color', {
  mounted(el, binding) {
    el.style.color = binding.value
  },
  updated(el, binding) {
    el.style.color = binding.value
  }
})

对象字面量

指令可以接收对象字面量：

HTML示例

<div v-demo="{ color: 'white', text: 'hello!' }"></div>

指令实现

app.directive('demo', (el, binding) => {
  console.log(binding.value.color) // => "white"
  console.log(binding.value.text)  // => "hello!"
})

高级指令示例

1. 权限控制指令

app.directive('permission', {
  mounted(el, binding) {
    const userRole = 'user' // 实际应从store或API获取
    if (userRole !== binding.value) {
      el.style.display = 'none'
    }
  }
})

2. 图片懒加载指令

app.directive('lazy', {
  mounted(el, binding) {
    const observer = new IntersectionObserver((entries) => {
      entries.forEach(entry => {
        if (entry.isIntersecting) {
          el.src = binding.value
          observer.unobserve(el)
        }
      })
    })
    observer.observe(el)
  }
})

实战案例

1. 点击外部关闭

实现点击元素外部时触发关闭逻辑的指令。

2. 复制到剪贴板

一键复制文本到剪贴板的指令实现。

3. 拖拽指令

使元素可拖拽的自定义指令实现。

拖拽我试试

点击外部关闭演示

点击弹窗外部或关闭按钮可以关闭此弹窗。

这是通过v-click-outside指令实现的。

Vue3 自定义指令完全指南

目录导航

Vue3 自定义指令完整教程

预览结果：