| 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 |
|
| 16 | componentName: 'ElMenuItemGroup',
|
| 17 |
|
| 18 | inject: ['rootMenu'],
|
| 19 | props: {
|
| 20 | title: {
|
| 21 | type: String
|
| 22 | }
|
| 23 | },
|
| 24 | data() {
|
| 25 | return {
|
| 26 | paddingLeft: 20
|
| 27 | };
|
| 28 | },
|
| 29 | computed: {
|
| 30 | levelPadding() {
|
| 31 | let padding = 20;
|
| 32 | let parent = this.$parent;
|
| 33 | if (this.rootMenu.collapse) return 20;
|
| 34 | while (parent && parent.$options.componentName !== 'ElMenu') {
|
| 35 | if (parent.$options.componentName === 'ElSubmenu') {
|
| 36 | padding += 20;
|
| 37 | }
|
| 38 | parent = parent.$parent;
|
| 39 | }
|
| 40 | return padding;
|
| 41 | }
|
| 42 | }
|
| 43 | };
|
| 44 | </script>
|
| 45 |
|