vue3 自定义指令的方式实现按钮权限控制。

在Vue 3中，可以通过自定义指令来实现按钮权限控制。下面是一个简单的示例：

首先，创建一个自定义指令文件（例如`permission.js`）：

import { Directive } from 'vue';

const permissionDirective: Directive = {
  mounted(el, binding) {
    const { value } = binding;

    // 根据用户的权限进行判断
    if (!checkPermission(value)) {
      el.style.display = 'none';
    }
  },
};

export default permissionDirective;

在上述代码中，我们定义了一个`permissionDirective`指令，在`mounted`钩子函数中根据用户的权限（这里使用`checkPermission`函数作为示例）来判断是否显示按钮。如果权限不满足条件，则将按钮的`display`属性设置为`none`，从而隐藏按钮。

接下来，在Vue组件中使用自定义指令：

<template>
  <button v-permission="'button.permission'">按钮</button>
</template>

<script>
import { defineComponent } from 'vue';
import permissionDirective from './permission';

export default defineComponent({
  directives: {
    permission: permissionDirective,
  },
});
</script>

在上述代码中，我们通过`v-permission`指令绑定了一个权限值（例如`'button.permission'`）。当组件渲染时，自定义指令会根据权限值进行判断，并控制按钮的显隐。

需要注意的是，上述代码中的`checkPermission`函数需要根据实际业务逻辑进行实现，用于判断用户是否具有相应的权限。

这是一个简单的示例，你可以根据自己的需求进行修改和扩展以满足具体的按钮权限控制需求。