| | |
| | | :class="{'is-active':vaildActive(item)}" |
| | | :index="item[pathKey]" |
| | | @click="open(item)"> |
| | | <i :class="item[iconKey]"></i> |
| | | <span slot="title" |
| | | :alt="item[pathKey]">{{ generateTitle(item) }}</span> |
| | | <div style="display: flex"> |
| | | <icon-show :name="item[iconKey]" class="iconShowSpan" :style="{ height: iconSize, width: iconSize }"></icon-show> |
| | | <span slot="title" |
| | | :alt="item[pathKey]" |
| | | :class="{'el-menu--display':collapse && first}">{{ generateTitle(item) }}</span> |
| | | </div> |
| | | </el-menu-item> |
| | | <el-submenu v-else-if="!validatenull(item[childrenKey])&&vaildRoles(item)" |
| | | :key="item[labelKey]" |
| | | :index="item[pathKey]"> |
| | | <template slot="title"> |
| | | <i :class="item[iconKey]"></i> |
| | | <span slot="title" |
| | | :class="{'el-menu--display':collapse && first}">{{ generateTitle(item) }}</span> |
| | | <div style="display: flex"> |
| | | <icon-show :name="item[iconKey]" class="iconShowSpan" :style="{ height: iconSize, width: iconSize }"></icon-show> |
| | | <span slot="title" |
| | | :class="{'el-menu--display':collapse && first}">{{ generateTitle(item) }}</span> |
| | | </div> |
| | | </template> |
| | | <template v-for="(child,cindex) in item[childrenKey]"> |
| | | <el-menu-item v-if="validatenull(child[childrenKey])" |
| | |
| | | :class="{'is-active':vaildActive(child)}" |
| | | :index="child[pathKey],cindex" |
| | | @click="open(child)"> |
| | | <i :class="child[iconKey]"></i> |
| | | <span slot="title">{{ generateTitle(child) }}</span> |
| | | <div style="display: flex"> |
| | | <icon-show :name="child[iconKey]" class="iconShowSpan" :style="{ height: iconSize, width: iconSize }"></icon-show> |
| | | <span slot="title">{{ generateTitle(child) }}</span> |
| | | </div> |
| | | </el-menu-item> |
| | | <sidebar-item v-else |
| | | :key="cindex" |
| | |
| | | }, |
| | | computed: { |
| | | ...mapGetters(["roles"]), |
| | | iconSize() { |
| | | return this.collapse ? '20px' : '16px'; |
| | | }, |
| | | labelKey() { |
| | | return this.props.label || this.config.propsDefault.label; |
| | | }, |
| | |
| | | } |
| | | }, |
| | | open(item) { |
| | | const query = { |
| | | ...item.query, |
| | | id:item.id |
| | | } |
| | | if (this.screen <= 1) this.$store.commit("SET_COLLAPSE"); |
| | | if (this.validIsOpen(item)) { |
| | | window.open(item[this.pathKey]); |
| | |
| | | name: item[this.labelKey], |
| | | src: item[this.pathKey] |
| | | }, item.meta), |
| | | query: item.query |
| | | query: query |
| | | }); |
| | | } |
| | | } |
| | |
| | | outline: 0; |
| | | background-color: #060708; |
| | | } |
| | | |
| | | .iconShowSpan{ |
| | | display: inline-block; |
| | | margin-top: -2px; |
| | | margin-right: 10px; |
| | | color: #eeeeea; |
| | | } |
| | | </style> |
| | | |
| | | |