menu-item-group.vue 975 B

123456789101112131415161718192021222324252627282930313233343536373839404142434445
  1. <template>
  2. <li class="el-menu-item-group">
  3. <div class="el-menu-item-group__title" :style="{paddingLeft: levelPadding + 'px'}">
  4. <template v-if="!$slots.title">{{title}}</template>
  5. <slot v-else name="title"></slot>
  6. </div>
  7. <ul>
  8. <slot></slot>
  9. </ul>
  10. </li>
  11. </template>
  12. <script>
  13. export default {
  14. name: 'ElMenuItemGroup',
  15. componentName: 'ElMenuItemGroup',
  16. inject: ['rootMenu'],
  17. props: {
  18. title: {
  19. type: String
  20. }
  21. },
  22. data() {
  23. return {
  24. paddingLeft: 20
  25. };
  26. },
  27. computed: {
  28. levelPadding() {
  29. let padding = 20;
  30. let parent = this.$parent;
  31. if (this.rootMenu.collapse) return 20;
  32. while (parent && parent.$options.componentName !== 'ElMenu') {
  33. if (parent.$options.componentName === 'ElSubmenu') {
  34. padding += 20;
  35. }
  36. parent = parent.$parent;
  37. }
  38. return padding;
  39. }
  40. }
  41. };
  42. </script>