简写directive，鉴权指令

<template>

  <button v-has-show="'add'">创建</button>

  <button v-has-show="'delete'">删除</button>

 

  </template>

 

  <script setup lang='ts'>

  import type { Directive, DirectiveBinding } from 'vue'

 

  // 模拟权限数据

  const promise = [

    'add',

    // 'delete'

  ]

  // 简写指令，函数形式，参数就是el和传入的参数

  const vHasShow:Directive<HTMLElement,string> = (el:HTMLElement, bing:DirectiveBinding<string>) => {

    if (!promise.includes(bing.value)) {

      el.style.display = 'none'

    }

  }

  </script>

 

  <style scoped lang='scss'>

 

  </style>