DemoMenu.vue 2.1 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <template>
  2. <a-layout id="app-demo-menu">
  3. <a-layout-sider
  4. theme="light"
  5. class="layout-sider"
  6. >
  7. <a-menu class="sub-menu-item" theme="light" mode="inline" :default-selected-keys="['menu_1']">
  8. <a-menu-item v-for="(menuInfo, subIndex) in menu" :key="subIndex">
  9. <router-link :to="{ name: menuInfo.pageName, params: menuInfo.params}">
  10. <span>{{ menuInfo.title }}</span>
  11. </router-link>
  12. </a-menu-item>
  13. </a-menu>
  14. </a-layout-sider>
  15. <a-layout>
  16. <a-layout-content>
  17. <router-view />
  18. </a-layout-content>
  19. </a-layout>
  20. </a-layout>
  21. </template>
  22. <script>
  23. export default {
  24. data() {
  25. return {
  26. menu: {
  27. 'menu_1' : {
  28. icon: 'profile',
  29. title: '文件 - 上传文件',
  30. pageName: 'DemoFileUploadFile',
  31. params: {}
  32. },
  33. 'menu_2' : {
  34. icon: 'profile',
  35. title: '文件 - 打开文件夹',
  36. pageName: 'DemoFileOpenDir',
  37. params: {}
  38. },
  39. 'menu_3' : {
  40. icon: 'profile',
  41. title: '通信 - IPC',
  42. pageName: 'DemoSocketIpc',
  43. params: {}
  44. },
  45. 'menu_4' : {
  46. icon: 'profile',
  47. title: '快捷键 - 注册',
  48. pageName: 'DemoShortcutIndex',
  49. params: {}
  50. },
  51. 'menu_5' : {
  52. icon: 'profile',
  53. title: '软件 - 打开第三方软件',
  54. pageName: 'DemoSoftwareOpen',
  55. params: {}
  56. },
  57. 'menu_6' : {
  58. icon: 'profile',
  59. title: '系统 - 开机启动',
  60. pageName: 'DemoSystemAutoLaunch',
  61. params: {}
  62. },
  63. }
  64. };
  65. },
  66. created () {
  67. },
  68. mounted () {
  69. this.menuHandle({key: 'menu_1'})
  70. },
  71. methods: {
  72. menuHandle (item) {
  73. const linkInfo = this.menu[item.key]
  74. this.$router.push({ name: linkInfo.pageName, params: linkInfo.params})
  75. }
  76. }
  77. };
  78. </script>
  79. <style lang="less" scoped>
  80. #app-demo-menu {
  81. height: 100%;
  82. text-align: left;
  83. .layout-sider {
  84. border-top: 1px solid #e8e8e8;
  85. border-right: 0px solid #e8e8e8;
  86. background-color: #FAFAFA;
  87. }
  88. }
  89. </style>