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

<script setup lang="ts">
import { ref, reactive } from "vue";
import type { Directive } from "vue";
// permission
localStorage.setItem("userId", "xiaoman-zs");

// mock后台返回的数据
const permission = [
  "xiaoman-zs:shop:edit",
  "xiaoman-zs:shop:create",
  "xiaoman-zs:shop:delete",
];
const userId = localStorage.getItem("userId") as string;
const vHasShow: Directive<HTMLElement, string> = (el, binding) => {
  console.log(el, binding);
  if (!permission.includes(userId + ":" + binding.value)) {
    el.style.display = "none";
  }
};
</script>

<style lang="scss">
.btns {
  button {
    margin: 10px;
  }
}
</style>

效果图：