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