vue3 权限按钮 通过数据的权限标识来控制按钮的显示和隐藏 怎么封装成一个公用的组件

为了实现权限按钮的控制，我们可以创建一个自定义组件，例如 `PermissionButton`。在这个组件中，我们可以传入一个权限标识 `permission` 和按钮的显示文本 `text`，然后根据当前用户的权限来控制按钮的显示和隐藏。

以下是一个简单的实现示例：

<template>
  <button v-if="hasPermission" @click="onClick">{{ text }}</button>
</template>

<script>
export default {
  props: {
    permission: {
      type: String,
      required: true
    },
    text: {
      type: String,
      default: 'Button'
    }
  },
  computed: {
    hasPermission () {
      // 根据用户的权限判断是否显示按钮
      // 这里假设有一个全局的权限管理器
      return globalPermissionManager.hasPermission(this.permission)
    }
  },
  methods: {
    onClick () {
      // 按钮点击事件
      this.$emit('click')
    }
  }
}
</script>

然后我们可以在应用中使用这个组件，例如：

<template>
  <div>
    <PermissionButton permission="create" text="Create" @click="create"></PermissionButton>
    <PermissionButton permission="update" text="Update" @click="update"></PermissionButton>
    <PermissionButton permission="delete" text="Delete" @click="delete"></PermissionButton>
  </div>
</template>

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

export default {
  components: {
    PermissionButton
  },
  methods: {
    create () {
      // 创建操作
    },
    update () {
      // 更新操作
    },
    delete () {
      // 删除操作
    }
  }
}
</script>

在这个示例中，我们创建了三个 `PermissionButton`，分别对应创建、更新和删除操作。每个按钮都传入了一个不同的权限标识和显示文本，然后根据当前用户的权限来控制显示和隐藏。当用户点击按钮时，会触发对应的操作。