Vue 教程：使用自定义指令实现权限控制、水印与拖拽等业务功能

快速概述

在 Vue 业务开发中，权限控制、水印与拖拽等功能往往散落在多个组件内，导致代码重复且难以维护。自定义指令（Directive）正是为解决这类横切关注点而设计：它允许你将 DOM 操作逻辑封装为可复用的单元，通过 v-permission、v-watermark、v-draggable 等指令即可在模板中声明式使用。适用场景包括后台管理系统、数据看板与富交互页面。前置环境要求：Vue 3.2+（本文以 Vue 3 组合式 API 为例），Node.js 16+，以及已初始化的 Vite 或 Vue CLI 项目。

核心概念与原理

自定义指令的本质是 Vue 暴露给开发者的 DOM 生命周期钩子集合。当指令绑定到元素时，Vue 会在对应阶段调用你定义的钩子函数：created（指令创建）、mounted（元素挂载）、updated（组件更新）、unmounted（元素卸载）。你可以在这些钩子中操作原生 DOM、读取绑定值（binding.value）或监听事件。与组件不同，指令没有模板与响应式数据，它更轻量，适合处理“元素级”的副作用逻辑。

实战步骤与代码

1. 注册指令

在 src/directives/index.js 中集中注册，便于全局引用：

// 权限控制指令
const permission = {
  mounted(el, binding) {
    const required = binding.value // 如 ['admin', 'editor']
    const userRoles = JSON.parse(localStorage.getItem('roles') || '[]')
    if (!required.some(role => userRoles.includes(role))) {
      el.parentNode?.removeChild(el) // 无权限则移除元素
    }
  }
}
// 水印指令 const watermark = { mounted(el, binding) { const text = binding.value?.text || '内部资料' const canvas = document.createElement('canvas') canvas.width = 200; canvas.height = 120 const ctx = canvas.getContext('2d') ctx.font = '16px sans-serif' ctx.fillStyle = 'rgba(0,0,0,0.08)' ctx.rotate(-0.3) ctx.fillText(text, 20, 80) el.style.backgroundImage = `url(${canvas.toDataURL('image/png')})` el.style.backgroundRepeat = 'repeat' } }
// 拖拽指令 const draggable = { mounted(el) { el.style.cursor = 'move' el.style.position = 'fixed' el.addEventListener('mousedown', (e) => { const startX = e.clientX - el.offsetLeft const startY = e.clientY - el.offsetTop const move = (ev) => { el.style.left = ev.clientX - startX + 'px' el.style.top = ev.clientY - startY + 'px' } const up = () => { document.removeEventListener('mousemove', move) document.removeEventListener('mouseup', up) } document.addEventListener('mousemove', move) document.addEventListener('mouseup', up) }) } }
export default { permission, watermark, draggable }

2. 在 main.js 中全局注册

import { createApp } from 'vue'
import App from './App.vue'
import directives from './directives'
const app = createApp(App) Object.entries(directives).forEach(([name, directive]) => { app.directive(name, directive) }) app.mount('#app')

3. 模板中使用

<template>
  <button v-permission="['admin']">删除</button>
  <div v-watermark="{ text: '机密文件' }">
    受保护内容区域
  </div>
  <div v-draggable>
    拖动我
  </div>
</template>

常见坑点与优化

• 权限指令的响应式问题：mounted 只在挂载时执行一次，若用户角色异步加载，指令可能误删元素。优化方案：在 updated 钩子中重新校验，或改用 v-if 配合计算属性。
• 水印的 Canvas 性能：频繁更新水印会重复生成 Canvas，建议将生成逻辑封装为纯函数并缓存结果。
• 拖拽的边界与事件泄漏：未在 unmounted 中移除事件监听会导致内存泄漏；同时需限制拖拽范围，避免元素被拖出视口。
• SSR 兼容性：指令钩子中直接访问 document 或 window 会在服务端渲染时报错，需用 typeof window !== 'undefined' 做守卫。

通过以上模式，你可以将任意 DOM 副作用逻辑抽象为指令，大幅提升代码复用率与可维护性。