vue-intercept-plugin

中文 | English

Click interception with a single directive. Register a global check function — every click goes through it before reaching your handler.

---

Install

npm install vue-intercept-plugin

Setup

Vue 3 — main.ts

import { createApp } from 'vue'
import VueInterceptPlugin from 'vue-intercept-plugin'

const app = createApp(App)
app.use(VueInterceptPlugin, {
  check: (ctx) => {
    // Return true to allow, false to deny
    return userStore.hasPermission('delete')
  },
  onDeny: (ctx) => {
    // Optional: called when denied
    ElMessage.warning('No permission')
  },
})

Vue 2 — main.js

import Vue from 'vue'
import VueInterceptPlugin from 'vue-intercept-plugin'

Vue.use(VueInterceptPlugin, {
  check: (ctx) => userStore.hasPermission('delete'),
  onDeny: (ctx) => ElMessage.warning('No permission'),
})

Usage

Two forms:

<!-- Pass a function directly -->
<button v-intercept="handleDelete">Delete</button>
<el-button v-intercept="handleDelete">Delete</el-button>

<!-- Array format: first is function, rest are args -->
<button v-intercept="[handleDeleteById, 1001]">Delete Order #1001</button>
<el-button v-intercept="[handleDeleteById, 1001, 'abc', true]">Batch</el-button>

const handleDelete = () => { deleteApi() }
const handleDeleteById = (id: number, str: string, flag: boolean) => {
  deleteApi(id, str, flag)
}

InterceptContext

check and onDeny receive:

interface InterceptContext {
  el: HTMLElement
  handler: Function
  value: unknown
}

Value mapping

Template	ctx.value	Actual call
v-intercept="fn"	fn	fn()
v-intercept="[fn]"	[fn]	fn()
v-intercept="[fn, 100]"	[fn, 100]	fn(100)
v-intercept="[fn, 100, 'a']"	[fn, 100, 'a']	fn(100, 'a')

License

MIT