🎸 把一篇老文章内容 vibecoding 成了 npm 包
以前写过一篇关于「Vue 自定义指令实现按钮权限拦截」的文章。想法挺好，但每次新项目都要从文章里复制代码到 main.ts，总感觉差点意思。
于是最近干脆把它 vibecoding 成了一个正经的 Vue 插件，发到 npm 上了。
原文：基于 Vue 自定义指令实现点击事件权限拦截控制
🤔 为什么需要这个？
大多数项目做到路由权限、接口权限就差不多了，很少有人会细化到按钮点击这个粒度。
但真遇到了就发现有几个痛点：
- 封装组件不现实 —— 给每个
el-button包一层PermissionButton，Props 透传写到手软 - UI 库不统一 —— Element Plus、Ant Design Vue、Naive UI……换一个就要重新封一套
- 原生元素也逃不掉 ——
<button>、<div>、<a>，封起来没完没了
Vue 自定义指令的方案刚好打在痛点上——直接操作原生 DOM 事件，跟 UI 库无关。
🧠 设计思路
插件只做一件事：拦截 click，传给 check，通过就放行，不通过就调 onDeny。
安装时注册 check 函数
app.use(VueInterceptPlugin, {check: (ctx) => userStore.hasPermission(ctx.id),onDeny: (ctx) => {ElMessage.warning(ctx.name,'无权操作')},
})
check 返回 true 放行、false 拦截，判断逻辑完全由你决定——可以从 ctx.el.dataset 读属性，可以从 ctx.value 读原始值，怎么方便怎么来。
两种写法
<!-- 无参数：直接传函数 -->
<el-button v-intercept="handleDelete">删除</el-button><!-- 带参数：数组第一个是函数，后面随便传 -->
<el-button v-intercept="[handleDeleteById, 1001]">删除订单 #1001</el-button>
<el-button v-intercept="[handleDeleteById, 1002, '加急']">删除订单 #1002</el-button>
handler 里只需要写业务逻辑：
const handleDelete = () => { deleteApi() }
const handleDeleteById = (id: number) => { deleteApi(id) }
不传事件对象，参数就是你给的值，不搞隐式追加。
check 可以怎么判断？
check 收到的 ctx 包含 el、handler、value，想怎么判断都行：
check: (ctx) => {// 从元素属性判断return ctx.el.dataset.role === 'admin'// 从原始值判断（数组传参场景）// const [fn, id, type] = ctx.value// return id !== 1001
}
🔄 Vue 2 / Vue 3 兼容
内部检测 app.version，自动切换指令钩子：
| Vue 版本 | 绑定 | 更新 | 卸载 |
|---|---|---|---|
| Vue 3 | mounted |
updated |
unmounted |
| Vue 2 | bind |
update |
unbind |
一套代码，双平台通用。
🎯 用起来
npm install vue-intercept-plugin
// Vue 3 — main.ts
import { createApp } from 'vue'
import VueInterceptPlugin from 'vue-intercept-plugin'const app = createApp(App)
app.use(VueInterceptPlugin, {check: (ctx) => checkPermission(ctx.el.dataset.perm),onDeny: () => ElMessage.warning('无权操作'),
})
<template><el-buttonv-intercept="handleDelete"data-perm="delete"type="danger">删除</el-button>
</template>
🔧 实现细节
- WeakMap 存储 —— 元素和事件监听函数的映射存在 WeakMap 里，不污染 DOM，元素销毁后自动回收
- SSR 安全 —— 检测到
window不存在时直接跳过，Nuxt 等环境不报错 - 单元测试覆盖 —— Vitest + jsdom，覆盖权限放行/拦截、数组传参、边界情况等
- 零依赖 —— 只有 3KB，无外部依赖
💬 最后
- GitHub: github.com/wangkai000/vue-intercept-plugin
- npm: npmjs.com/package/vue-intercept-plugin