老实说，

🎸 把一篇老文章内容 vibecoding 成了 npm 包

以前写过一篇关于「Vue 自定义指令实现按钮权限拦截」的文章。想法挺好，但每次新项目都要从文章里复制代码到 main.ts总感觉差点意思。

于是最近干脆把它 vibecoding 成了一个正经的 Vue 插件，发到 npm 上了。话说回来，

🤔 为什么需要这个？老实说，

在实际项目中。以下痛点会让开发者头疼：

• 频繁复制粘贴每个新页面都得手动写权限拦截逻辑，耽误时间。
• UI 组件多样化Element Plus、Ant Design Vue、Naive UI 等等，每套库都要重新封装一次。
• 原生元素无法统一管理/
  / 等，都需要手动添加权限校验。
• 缺乏粒度控制大多数团队只关注路由或接口层面的权限，忽略了按钮级别的细粒度保护。

"我想快速搞定按钮权限。但又不想重写太多代码"

🧠 设计思路

插件只做一件事：拦截 click，传给 check，通过就放行，不通过就调 onDeny。

安装时注册 check 函数

app.use(VueInterceptPlugin,{
再看check，=> userStore.hasPermission,onDeny: => {
ElMessage.warning
}。})

check 返回 true 放行、false 拦截，判断逻辑完全由你决定——可以从 ctx.el.dataset 读属性，也可以从 ctx.value 读原始值。怎么方便怎么来，

两种写法

删除
删除订单 #
checkPermission,onDeny:=>ElMessage.warning,})
app.mount

# 示例模板：

🔧 实现细节 & 优势 🚀

• blank\">GitHub仓库– 超清晰维护日志与贡献教程！​ blank\">GitHub 仓库地址 → https://github.com/wangkai000/vue‑intercept‑plugin ​” “style=\"text-decoration:none; color:#337ab7;\"> blank\">GitHub 仓库地址 → https://github.com/wangkai000/vue‑intercept‑plugin ​” “style=\"text-decoration:none;color:#337ab7;\"> blank\">GitHub 仓库地址 → https://github.com/wangkai000/vue‑intercept‑plugin ​” “style=\"text-decoration:none; color:#337ab7; \">

​ ​" /> ​" /> ​" /> ​​

​
​

​

\u00A0\u00A0   \u00A0\u00A0⋅⋅⋅⋅⋅\u00A0\u00A0…\u00A0\u00A0\u2026& bsp;老实说，

 - ⚙️ **WeakMap 存储** – 元素和事件监听函数映射存在 WeakMap 内部。无污染 DOM，元素销毁后自动回收。- 🌐 **SSR 安全** – 检测到 window 不存在时直接跳过Nuxt 等环境不报错。- 🧪 **单元测试覆盖** – Vitest + jsdom 覆盖权限放行/拦截、数组传参、边界情况等。- 📦 **零依赖** – 打包仅 ~3KB，无外部依赖。