sub-menu-item.vue 813 B

123456789101112131415161718192021222324252627282930313233
  1. <template>
  2. <template v-for="item in data">
  3. <div
  4. :class="`sub-menu-item level-${level}`"
  5. :style="{ marginLeft: level * 20 + 'px' }"
  6. >
  7. <el-button
  8. :type="
  9. $route.matched.some((v) => v.path === item.path) ? 'success' : 'info'
  10. "
  11. @click="$router.push(item.redirect || item.path)"
  12. >{{ item.meta.title }}</el-button
  13. >
  14. </div>
  15. <template v-if="item.children?.length > 0">
  16. <subMenuItem :data="item.children" :level="level + 1" />
  17. </template>
  18. </template>
  19. </template>
  20. <script setup lang="ts">
  21. import { getCurrentInstance, reactive } from 'vue'
  22. const { proxy } = getCurrentInstance()
  23. const props = defineProps({
  24. data: {},
  25. level: { default: 0 },
  26. })
  27. const state: any = reactive({})
  28. </script>
  29. <style lang="scss" scoped></style>