| 提交 | 用户 | age | ||
| 2f6253 | 1 | <template> |
| 31ff05 | 2 | <PageWrapper |
| V | 3 | title="后台权限示例" |
| de5bf7 | 4 | contentBackground |
| 31ff05 | 5 | contentClass="p-4" |
| V | 6 | content="目前mock了两组数据， id为1 和 2 具体返回的菜单可以在mock/sys/menu.ts内查看" |
| 7 | > | |
| 2f6253 | 8 | <CurrentPermissionMode /> |
| 陈 | 9 | |
| 10 | <Alert class="mt-4" type="info" message="点击后请查看左侧菜单变化" show-icon /> | |
| 11 | ||
| 12 | <div class="mt-4"> | |
| 13 | 权限切换(请先切换权限模式为后台权限模式): | |
| 14 | <a-button-group> | |
| 15 | <a-button @click="changeMenu('1')"> 获取用户id为1的菜单 </a-button> | |
| 16 | <a-button @click="changeMenu('2')"> 获取用户id为2的菜单 </a-button> | |
| 17 | </a-button-group> | |
| 18 | </div> | |
| 31ff05 | 19 | </PageWrapper> |
| 2f6253 | 20 | </template> |
| 陈 | 21 | <script lang="ts"> |
| 22 | import { defineComponent } from 'vue'; | |
| 23 | import CurrentPermissionMode from '../CurrentPermissionMode.vue'; | |
| 24 | import { RoleEnum } from '/@/enums/roleEnum'; | |
| 25 | import { usePermission } from '/@/hooks/web/usePermission'; | |
| 31ff05 | 26 | import { PageWrapper } from '/@/components/Page'; |
| V | 27 | import { Alert } from 'ant-design-vue'; |
| 2f6253 | 28 | export default defineComponent({ |
| 31ff05 | 29 | components: { Alert, CurrentPermissionMode, PageWrapper }, |
| 2f6253 | 30 | setup() { |
| 陈 | 31 | const { changeMenu } = usePermission(); |
| 32 | return { | |
| 33 | RoleEnum, | |
| 34 | changeMenu, | |
| 35 | }; | |
| 36 | }, | |
| 37 | }); | |
| 38 | </script> | |
| 03b602 | 39 | <style lang="less" scoped> |
| N | 40 | .demo { |
| 2cdf2c | 41 | background-color: @component-background; |
| 03b602 | 42 | } |
| N | 43 | </style> |
