repair_lite/front-end/src/components/side-menu/SideMenu.vue

<template>
    <div class="side-menu-wrapper">
        <slot></slot>
        <!--侧边菜单栏展开时显示方式-->
        <Menu ref="menu" :active-name="activeName" :open-names="openedNames"
              :accordion="accordion" :theme="theme" width="auto" @on-select="handleSelect" v-show="!collapsed">
            <MenuItem name="1">
                <Icon type="ios-home" />
                首页
            </MenuItem>
            <MenuItem name="2">
                <Icon type="ios-reorder" />
                订单管理
            </MenuItem>
        </Menu>
        <!--侧边菜单栏叠起时显示方式-->
        <div class="menu-collapsed" v-show="collapsed"></div>
    </div>
</template>

<script>
    // import SideMenuItem from './SideMenuItem.vue'
    // import CollapsedMenu from './CollapseMenu.vue'
    // import { getUnion } from '@/libs/tools'
    // import mixin from './mixin'

    export default {
        name: "SideMenu",
        // mixins: [mixin],
        props: {
            menuList: {
                type: Array,
                default () {
                    return []
                }
            },
            collapsed: {
                type: Boolean
            },
            theme: {
                type: String,
                default: 'dark'
            },
            accordion: {
                type: Boolean
            },
            rootIconSize: {
                type: Number,
                default: 20
            },
            iconSize: {
                type: Number,
                default: 16
            },
            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' ? '#ffffff' : '#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))
        }
    }
</script>

<style lang="less" scoped>

</style>