初始版本提交

src/components/Authority/index.ts

@@ -0,0 +1,4 @@
+import { withInstall } from '/@/utils';
+import authority from './src/Authority.vue';
+
+export const Authority = withInstall(authority);

src/components/Authority/src/Authority.vue

@@ -0,0 +1,45 @@
+<!--
+ Access control component for fine-grained access control.
+-->
+<script lang="ts">
+  import type { PropType } from 'vue';
+  import { defineComponent } from 'vue';
+  import { RoleEnum } from '/@/enums/roleEnum';
+  import { usePermission } from '/@/hooks/web/usePermission';
+  import { getSlot } from '/@/utils/helper/tsxHelper';
+
+  export default defineComponent({
+    name: 'Authority',
+    props: {
+      /**
+       * Specified role is visible
+       * When the permission mode is the role mode, the value value can pass the role value.
+       * When the permission mode is background, the value value can pass the code permission value
+       * @default ''
+       */
+      value: {
+        type: [Number, Array, String] as PropType<RoleEnum | RoleEnum[] | string | string[]>,
+        default: '',
+      },
+    },
+    setup(props, { slots }) {
+      const { hasPermission } = usePermission();
+
+      /**
+       * Render role button
+       */
+      function renderAuth() {
+        const { value } = props;
+        if (!value) {
+          return getSlot(slots);
+        }
+        return hasPermission(value) ? getSlot(slots) : null;
+      }
+
+      return () => {
+        // Role-based value control
+        return renderAuth();
+      };
+    },
+  });
+</script>