1. 简写

自定义指令的简写形式是一个函数，代表的是生命周期 mounted 和 updated

const vShowBtn: Directive = (el, binding) => {
    console.log(el, binding)
}

2. 鉴权

后端会返回一个权限数组，前端可以根据权限数组决定是否显示某些按钮

<template>
<div class="btns">
    <button v-show-btn="'shop:create'">创建</button>
    <button v-show-btn="'shop:edit'">编辑</button>
    <button v-show-btn="'shop:delete'">删除</button>
</div>
</template>

<script setup lang="ts">
import { Directive } from 'vue';

// 模拟真实开发中的按钮鉴权

// 存储 用户 id - vuex/pinia/storage
localStorage.setItem('userId', 'lzy')

// mock 一个权限数组
const permisson = [
    'lzy:shop:create',
    'lzy:shop:edit',
    'lzy:shop:delete',
]

const vShowBtn: Directive<HTMLElement, string> = (el, binding) => {
    // 获取 用户 id
    const userId = localStorage.getItem('userId')

    // 根据鉴权数组，判断是否显示某个按钮
    if(!permisson.includes(userId + ':' + binding.value)){
        // 如果没有权限，则不显示按钮
        el.style.display = 'none'
    }
}
</script>

<style scoped>
.btns button {
    margin: 20px;
}
</style>