自定义右键点击指令vue3

一、原因

想在标签上实现右键菜单，结果naive-ui的tags不支持这个操作。本来用的是自己写的div标签，这样可以响应右键菜单，昨晚突然想到可以用指令来实现，于是自定义了这个指令

二、代码

import type {App} from "vue"
export const youjianzhuce = (app:App)=>{
    const chuli=(el:any,binding:any)=>{
        const {value} = binding
        value && value(el)
    }
    console.log("注册指令")
    app.directive('youjian', {
        mounted: function (el:any, binding:any, ) {
            el.addEventListener("contextmenu",(e: any)=>{
                console.log(e,'右键点击,指令处')
                chuli(e,binding)
            })
        },
        unmounted: function (el:any, binding:any,) {
            el.removeEventListener("contextmenu",(e: any)=>{
                console.log(e,'右键点击,指令处')
                chuli(e,binding)
            })
        }
    })
}

三、使用

youjianzhuce(app)即可注册

<组件 v-youjian="函数"></组件>

函数的第一个参数是事件