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

可以封装一个 `PermissionButton` 组件，该组件接收一个 `permission` 参数，用于判断当前用户是否有权限操作该按钮。如果有权限，则渲染一个普通的按钮；如果没有权限，则渲染一个置灰的按钮。

以下是示例代码：

<template>
  <button v-if="hasPermission" @click="$emit('click')">
    <slot></slot>
  </button>
  <button v-else disabled>
    <slot></slot>
  </button>
</template>

<script>
export default {
  props: {
    permission: {
      type: Boolean,
      required: true
    }
  },
  computed: {
    hasPermission() {
      // 这里可以添加具体的权限判断逻辑
      return this.permission
    }
  }
}
</script>

在使用该组件时，可以通过传入接口返回的权限参数来控制按钮权限。示例代码如下：

<template>
  <div>
    <PermissionButton :permission="canEdit" @click="onEdit">
      编辑
    </PermissionButton>
    <PermissionButton :permission="canDelete" @click="onDelete">
      删除
    </PermissionButton>
  </div>
</template>

<script>
import PermissionButton from './PermissionButton.vue'

export default {
  components: {
    PermissionButton
  },
  data() {
    return {
      canEdit: false,
      canDelete: true
    }
  },
  mounted() {
    // 通过接口返回的数据来控制按钮权限
    this.canEdit = this.checkPermission('edit')
    this.canDelete = this.checkPermission('delete')
  },
  methods: {
    checkPermission(permission) {
      // 这里可以根据实际业务逻辑来判断当前用户是否有权限
      // 返回 true 或 false
    },
    onEdit() {
      // 编辑操作
    },
    onDelete() {
      // 删除操作
    }
  }
}
</script>

在上面的示例代码中，`checkPermission` 方法用于判断当前用户是否有权限操作某个功能，返回一个布尔值。在 `mounted` 钩子函数中，可以通过接口返回的数据来设置 `canEdit` 和 `canDelete` 的值，从而控制按钮的显示状态。当用户没有权限操作某个按钮时，该按钮会被置灰并禁用。