MenuItem.vue 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889
  1. <template>
  2. <el-menu-item :index="handlePath(routeChildren.path)" @click="handleLink">
  3. <vab-icon
  4. v-if="routeChildren.meta.icon"
  5. :icon="['fas', routeChildren.meta.icon]"
  6. class="vab-fas-icon"
  7. />
  8. <vab-remix-icon
  9. v-if="routeChildren.meta.remixIcon"
  10. :icon-class="routeChildren.meta.remixIcon"
  11. class="vab-remix-icon"
  12. />
  13. <span>{{ routeChildren.meta.title }}</span>
  14. <el-tag
  15. v-if="routeChildren.meta && routeChildren.meta.badge"
  16. type="danger"
  17. effect="dark"
  18. >
  19. {{ routeChildren.meta.badge }}
  20. </el-tag>
  21. </el-menu-item>
  22. </template>
  23. <script>
  24. import { isExternal } from "@/utils/validate";
  25. import path from "path";
  26. export default {
  27. name: "MenuItem",
  28. props: {
  29. routeChildren: {
  30. type: Object,
  31. default() {
  32. return null;
  33. },
  34. },
  35. item: {
  36. type: Object,
  37. default() {
  38. return null;
  39. },
  40. },
  41. fullPath: {
  42. type: String,
  43. default: "",
  44. },
  45. },
  46. methods: {
  47. handlePath(routePath) {
  48. if (isExternal(routePath)) {
  49. return routePath;
  50. }
  51. if (isExternal(this.fullPath)) {
  52. return this.fullPath;
  53. }
  54. return path.resolve(this.fullPath, routePath);
  55. },
  56. handleLink() {
  57. const routePath = this.routeChildren.path;
  58. const target = this.routeChildren.meta.target;
  59. if (target === "_blank") {
  60. if (isExternal(routePath)) {
  61. window.open(routePath);
  62. } else if (isExternal(this.fullPath)) {
  63. window.open(this.fullPath);
  64. } else if (
  65. this.$route.path !== path.resolve(this.fullPath, routePath)
  66. ) {
  67. let routeData = this.$router.resolve(
  68. path.resolve(this.fullPath, routePath)
  69. );
  70. window.open(routeData.href);
  71. }
  72. } else {
  73. if (isExternal(routePath)) {
  74. window.location.href = routePath;
  75. } else if (isExternal(this.fullPath)) {
  76. window.location.href = this.fullPath;
  77. } else if (
  78. this.$route.path !== path.resolve(this.fullPath, routePath)
  79. ) {
  80. this.$router.push(path.resolve(this.fullPath, routePath));
  81. }
  82. }
  83. },
  84. },
  85. };
  86. </script>