|
@@ -1,14 +1,29 @@
|
|
|
<template>
|
|
|
- <div class="side-menu-wrapper">
|
|
|
- <slot></slot>
|
|
|
- <Menu ref="menu" v-show="!collapsed" :active-name="activeName" :open-names="openedNames" :accordion="accordion" :theme="theme" width="auto" @on-select="handleSelect">
|
|
|
+ <div class="side-menu-wrapper">
|
|
|
+ <slot></slot>
|
|
|
+ <Menu theme="dark" v-show="!collapsed" width="auto" active-name="1">
|
|
|
+ <div v-for="i in menuList" :key="i.id">
|
|
|
+ <MenuItem :name="i.id" v-if="!i.children || i.children.length == 0">
|
|
|
+ <Icon type="ios-paper" />
|
|
|
+ {{i.name}}
|
|
|
+ </MenuItem>
|
|
|
+ <Submenu :name="i.id" v-if="i.children && i.children.length > 0" >
|
|
|
+ <template slot="title">
|
|
|
+ <Icon type="ios-stats" />
|
|
|
+ {{i.name}}
|
|
|
+ </template>
|
|
|
+ <MenuItem :name="i.id + jindex" v-for="(j,jindex) in i.children" :key="j.id">{{j.name}}</MenuItem>
|
|
|
+ </Submenu>
|
|
|
+ </div>
|
|
|
+ </Menu>
|
|
|
+ <!-- <Menu ref="menu" v-show="!collapsed" :active-name="activeName" :open-names="openedNames" :accordion="accordion" :theme="theme" width="auto" @on-select="handleSelect">
|
|
|
<template v-for="item in menuList">
|
|
|
<template v-if="item.children && item.children.length === 1">
|
|
|
<side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
|
|
|
<menu-item v-else :name="getNameOrHref(item, true)" :key="`menu-${item.children[0].name}`">
|
|
|
<div class="my-menu-item">
|
|
|
<common-icon :size="18" :type="item.children[0].icon || ''" style="margin-left: 8px;position: absolute;left: 24px;top: 50%;transform: translateY(-50%)"/>
|
|
|
- <span>{{ showTitle(item.children[0]) }}</span>
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
</div>
|
|
|
</menu-item>
|
|
|
</template>
|
|
@@ -16,20 +31,20 @@
|
|
|
<side-menu-item v-if="showChildren(item)" :key="`menu-${item.name}`" :parent-item="item"></side-menu-item>
|
|
|
<menu-item v-else :name="getNameOrHref(item)" :key="`menu-${item.name}`">
|
|
|
<common-icon :type="item.icon || ''"/>
|
|
|
- <span>{{ showTitle(item) }}</span>
|
|
|
+ <span>{{ item.name }}</span>
|
|
|
</menu-item>
|
|
|
</template>
|
|
|
</template>
|
|
|
- </Menu>
|
|
|
- <div class="menu-collapsed" v-show="collapsed" :list="menuList">
|
|
|
+ </Menu> -->
|
|
|
+ <!-- <div class="menu-collapsed" v-show="collapsed" :list="menuList">
|
|
|
<template v-for="item in menuList">
|
|
|
<collapsed-menu v-if="item.children && item.children.length > 1" @on-click="handleSelect" hide-title :root-icon-size="rootIconSize" :icon-size="iconSize" :theme="theme" :parent-item="item" :key="`drop-menu-${item.name}`"></collapsed-menu>
|
|
|
<Tooltip transfer v-else :content="showTitle(item.children && item.children[0] ? item.children[0] : item)" placement="right" :key="`drop-menu-${item.name}`">
|
|
|
<a @click="handleSelect(getNameOrHref(item, true))" class="drop-menu-a" :style="{textAlign: 'center'}"><common-icon :size="rootIconSize" :color="textColor" :type="item.icon || (item.children[0] && (item.children[0].icon || ''))"/></a>
|
|
|
</Tooltip>
|
|
|
</template>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
+ </div> -->
|
|
|
+ </div>
|
|
|
</template>
|
|
|
<script>
|
|
|
import SideMenuItem from './side-menu-item.vue'
|
|
@@ -38,83 +53,93 @@ import { getUnion } from '@/libs/tools'
|
|
|
import mixin from './mixin'
|
|
|
|
|
|
export default {
|
|
|
- name: 'SideMenu',
|
|
|
- mixins: [ mixin ],
|
|
|
- components: {
|
|
|
- SideMenuItem,
|
|
|
- CollapsedMenu
|
|
|
- },
|
|
|
- props: {
|
|
|
- menuList: {
|
|
|
- type: Array,
|
|
|
- default () {
|
|
|
- return []
|
|
|
- }
|
|
|
- },
|
|
|
- collapsed: {
|
|
|
- type: Boolean
|
|
|
- },
|
|
|
- theme: {
|
|
|
- type: String,
|
|
|
- default: 'dark'
|
|
|
- },
|
|
|
- rootIconSize: {
|
|
|
- type: Number,
|
|
|
- default: 20
|
|
|
- },
|
|
|
- iconSize: {
|
|
|
- type: Number,
|
|
|
- default: 16
|
|
|
- },
|
|
|
- accordion: Boolean,
|
|
|
- activeName: {
|
|
|
- type: String,
|
|
|
- default: ''
|
|
|
- },
|
|
|
- openNames: {
|
|
|
- type: Array,
|
|
|
- default: () => []
|
|
|
- }
|
|
|
- },
|
|
|
- data () {
|
|
|
- return {
|
|
|
- openedNames: []
|
|
|
- }
|
|
|
- },
|
|
|
- methods: {
|
|
|
- handleSelect (name) {
|
|
|
- this.$emit('on-select', name)
|
|
|
- },
|
|
|
- getOpenedNamesByActiveName (name) {
|
|
|
- return this.$route.matched.map(item => item.name).filter(item => item !== name)
|
|
|
- },
|
|
|
- updateOpenName (name) {
|
|
|
- if (name === this.$config.homeName) this.openedNames = []
|
|
|
- else this.openedNames = this.getOpenedNamesByActiveName(name)
|
|
|
- }
|
|
|
- },
|
|
|
- computed: {
|
|
|
- textColor () {
|
|
|
- return this.theme === 'dark' ? '#fff' : '#495060'
|
|
|
- }
|
|
|
- },
|
|
|
- watch: {
|
|
|
- activeName (name) {
|
|
|
- if (this.accordion) this.openedNames = this.getOpenedNamesByActiveName(name)
|
|
|
- else this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))
|
|
|
- },
|
|
|
- openNames (newNames) {
|
|
|
- this.openedNames = newNames
|
|
|
- },
|
|
|
- openedNames () {
|
|
|
- this.$nextTick(() => {
|
|
|
- this.$refs.menu.updateOpened()
|
|
|
- })
|
|
|
- }
|
|
|
+ name: 'SideMenu',
|
|
|
+ mixins: [mixin],
|
|
|
+ components: {
|
|
|
+ SideMenuItem,
|
|
|
+ CollapsedMenu,
|
|
|
+ },
|
|
|
+ props: {
|
|
|
+ menuList: {
|
|
|
+ type: Array,
|
|
|
+ default() {
|
|
|
+ return []
|
|
|
+ },
|
|
|
+ },
|
|
|
+ collapsed: {
|
|
|
+ type: Boolean,
|
|
|
+ },
|
|
|
+ theme: {
|
|
|
+ type: String,
|
|
|
+ default: 'dark',
|
|
|
+ },
|
|
|
+ rootIconSize: {
|
|
|
+ type: Number,
|
|
|
+ default: 20,
|
|
|
+ },
|
|
|
+ iconSize: {
|
|
|
+ type: Number,
|
|
|
+ default: 16,
|
|
|
+ },
|
|
|
+ accordion: Boolean,
|
|
|
+ activeName: {
|
|
|
+ type: String,
|
|
|
+ default: '',
|
|
|
+ },
|
|
|
+ openNames: {
|
|
|
+ type: Array,
|
|
|
+ default: () => [],
|
|
|
+ },
|
|
|
+ },
|
|
|
+ data() {
|
|
|
+ return {
|
|
|
+ openedNames: [],
|
|
|
+ }
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ handleSelect(name) {
|
|
|
+ this.$emit('on-select', name)
|
|
|
+ },
|
|
|
+ getOpenedNamesByActiveName(name) {
|
|
|
+ return this.$route.matched
|
|
|
+ .map((item) => item.name)
|
|
|
+ .filter((item) => item !== name)
|
|
|
+ },
|
|
|
+ updateOpenName(name) {
|
|
|
+ if (name === this.$config.homeName) this.openedNames = []
|
|
|
+ else this.openedNames = this.getOpenedNamesByActiveName(name)
|
|
|
+ },
|
|
|
+ },
|
|
|
+ computed: {
|
|
|
+ textColor() {
|
|
|
+ return this.theme === 'dark' ? '#fff' : '#495060'
|
|
|
+ },
|
|
|
+ },
|
|
|
+ watch: {
|
|
|
+ activeName(name) {
|
|
|
+ if (this.accordion)
|
|
|
+ this.openedNames = this.getOpenedNamesByActiveName(name)
|
|
|
+ else
|
|
|
+ this.openedNames = getUnion(
|
|
|
+ this.openedNames,
|
|
|
+ this.getOpenedNamesByActiveName(name)
|
|
|
+ )
|
|
|
+ },
|
|
|
+ openNames(newNames) {
|
|
|
+ this.openedNames = newNames
|
|
|
+ },
|
|
|
+ openedNames() {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.menu.updateOpened()
|
|
|
+ })
|
|
|
+ },
|
|
|
+ },
|
|
|
+ mounted() {
|
|
|
+ //this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))
|
|
|
+ },
|
|
|
+ beforeRouteLeave(){
|
|
|
+
|
|
|
},
|
|
|
- mounted () {
|
|
|
- this.openedNames = getUnion(this.openedNames, this.getOpenedNamesByActiveName(name))
|
|
|
- }
|
|
|
}
|
|
|
</script>
|
|
|
<style lang="less" scoped>
|