Vue 教程：自定义指令实战——从权限控制到水印防截屏

快速概述

Vue 自定义指令用于封装对 DOM 元素的底层操作，解决权限控制、水印防截屏等跨组件复用问题。适用场景包括按钮级权限校验、内容防复制、页面水印等。前置环境要求 Vue 2.4+ 或 Vue 3.x，建议使用 Vue CLI 创建项目。

核心概念与原理

自定义指令通过 directive 选项注册，核心钩子函数包括 bind（绑定）、inserted（插入）、update（更新）等。权限控制指令在 inserted 阶段读取用户权限列表，决定是否移除元素；水印指令则在 inserted 阶段创建覆盖层并监听 DOM 变化。

实战步骤与代码

1. 创建项目并注册指令

// 创建项目
vue create vue-directive-demo
cd vue-directive-demo
npm run serve

2. 实现权限控制指令

// src/directives/permission.js
export default {
  inserted(el, binding) {
    // 获取当前用户权限列表
    const userPermissions = ['admin', 'editor'];
    // 指令传入所需权限
    const requiredPermission = binding.value;
    if (!userPermissions.includes(requiredPermission)) {
      // 无权限则移除元素
      el.parentNode && el.parentNode.removeChild(el);
    }
  }
}

3. 实现水印防截屏指令

// src/directives/watermark.js
export default {
  inserted(el, binding) {
    // 创建水印容器
    const watermark = document.createElement('div');
    watermark.style.position = 'fixed';
    watermark.style.top = '0';
    watermark.style.left = '0';
    watermark.style.width = '100%';
    watermark.style.height = '100%';
    watermark.style.pointerEvents = 'none';
    watermark.style.zIndex = '9999';
    // 设置水印文本
    watermark.textContent = binding.value || '内部资料';
    el.appendChild(watermark);
  }
}

4. 在组件中使用

<template>
  <div v-permission="'admin'">管理员可见内容</div>
  <div v-watermark="'机密文件'">受保护内容区域</div>
</template>
<script>
export default {
  directives: {
    permission: require('./directives/permission').default,
    watermark: require('./directives/watermark').default
  }
}
</script>

常见坑点与优化

• 权限指令失效：确保在 inserted 阶段操作 DOM，避免在 bind 阶段访问父节点。
• 水印覆盖问题：设置 pointer-events: none 防止水印阻挡用户交互。
• 性能优化：避免在指令中频繁操作 DOM，可结合 update 钩子做差异化更新。
• Vue 3 兼容：Vue 3 中钩子函数名称变化，需使用 mounted 替代 inserted。