vue3 directive自定义方法，实现编辑操作的权限控制

directive.js

import store from '../store'
import { message } from "ant-design-vue";

export default (app) => {
    app.directive('click-permit', {
        mounted(el, binding) {
            let auths = store.state.user.roleInfo.auths || []
            let auth = binding.arg
            const clickFn = () => {
                const isAuth = auths.includes(auth)
                if (isAuth) {
                    if (binding.value) {
                        let params = binding.value.params
                        let fn = binding.value.fn
                        fn(params)
                    }

                } else {
                    message.destroy()
                    message.error('无权限')
                }
            }
            el.addEventListener('click', clickFn)
        },

    })
}

main.ts

import { createApp } from 'vue'
import App from './App.vue'
import router from './router/index'
import store from './store'
import Antd, { message } from "ant-design-vue";
import '@/styles/global.less'
import moment from 'moment'

import directives from './directive'


const app = createApp(App)
app.use(store)
.use(router)
.use(Antd)


directives(app)

app.mount('#app')
var Mock = require('mockjs')
var data = Mock.mock({
    // 属性 list 的值是一个数组，其中含有 1 到 10 个元素
    'list|1-10': [{
        // 属性 id 是一个自增数，起始值为 1，每次增 1
        'id|+1': 1
    }]
})

index.vue

<template>
 
  <a-button
          type="primary"
          v-if="!isEdit"
          v-click-permit:company:update="{ fn: onShowEdit, params: true }"
          >编辑</a-button
        >
 
</template>
<script>
import {
  defineComponent,
  ref,
  onMounted,
} from "vue";

export default defineComponent({

  setup() {
    const onShowEdit = (status) => {
      
    };

    return {
      onShowEdit,
    
    };
  },
});
</script>
<style lang="less" scoped></style>