vue3 根据接口返回的参数 进行按钮的权限管理 怎么封装组件 代码

首先，可以封装一个名为"PermissionButton"的组件，该组件接收两个参数：按钮文本和权限标识符。

代码如下：

<template>
  <button v-if="hasPermission" @click="$emit('click')">
    {{ buttonText }}
  </button>
</template>

<script>
export default {
  props: {
    buttonText: {
      type: String,
      required: true
    },
    permissionIdentifier: {
      type: String,
      required: true
    },
    userPermissions: {
      type: Array,
      required: true
    }
  },
  computed: {
    hasPermission() {
      return this.userPermissions.includes(this.permissionIdentifier);
    }
  }
};
</script>

在这个组件中，我们通过props接收了三个参数：

- buttonText：按钮文本
- permissionIdentifier：权限标识符
- userPermissions：用户权限列表

然后，我们在computed属性中定义了一个"hasPermission"计算属性，用来判断当前用户是否拥有该按钮的权限。具体实现是通过判断用户权限列表中是否包含该按钮的权限标识符。

最后，我们在模板中使用v-if指令判断用户是否拥有该按钮的权限。如果用户拥有权限，就显示按钮，否则不显示。

使用该组件时，只需要将接口返回的用户权限列表传递给该组件即可：

<template>
  <div>
    <permission-button
      buttonText="添加用户"
      permissionIdentifier="addUser"
      :userPermissions="userPermissions"
      @click="addUser"
    />
    <permission-button
      buttonText="删除用户"
      permissionIdentifier="deleteUser"
      :userPermissions="userPermissions"
      @click="deleteUser"
    />
  </div>
</template>

<script>
import PermissionButton from "@/components/PermissionButton.vue";

export default {
  components: {
    PermissionButton
  },
  data() {
    return {
      userPermissions: []
    };
  },
  methods: {
    addUser() {
      // 添加用户逻辑
    },
    deleteUser() {
      // 删除用户逻辑
    }
  }
};
</script>

在这个代码示例中，我们将两个PermissionButton组件放在了一个div中，分别传递了不同的按钮文本和权限标识符。同时，我们将用户权限列表传递给了每个PermissionButton组件，并在@click事件中定义了添加用户和删除用户的逻辑。