MTP2.0_WEB/src/views/information/goods/components/leftMenu/index.vue

<template>
  <div class="leftMenu">
        <a-menu theme="dark" mode="inline" class="left-menu"  @click="menuClick">
            <a-sub-menu v-for="item in menuList" :key="item.key">
                <template #title>
                    <span>
                        <span class="menu-item_title" v-show="!collapsed">{{ item.title }}</span>
                    </span>
                </template>
                <a-menu-item :key="subItem.code" v-for="subItem in item.children">
                    <span>{{ subItem.title }}</span>
                </a-menu-item>
            </a-sub-menu>
        </a-menu>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref, PropType } from 'vue';
import APP from '@/services';

interface Key {
    [propName: string]: string;
}
// 菜单栏
const handleMenu = () => {
    const collapsed = ref<boolean>(false);
    const selectedKeys = ref<string[]>(['1-1']);
    const openKeys = ref<string[]>(['1']);
    const preOpenKeys = ref<string[]>(['1']);
    // const menuList = APP.getRef('menus');
    const menuList = [
        {
          key: '1',
          title: '正常',
          children: [
            {
              key: '1-1',
              title: 'SHFE-沪银(千克)',
            },
            {
              key: '1-2',
              title: 'SHFE-沪铜(吨)',
            },
          ],
        },
        {
          key: '2',
          title: '停用',
          children: [
            {
              key: '2-1',
              title: 'SHFE-沪铁(吨)',
            },
          ],
        },
      ];

    // 控制菜单是否隐藏
    function collapse(collapsed: boolean) {
        if (collapsed) {
            preOpenKeys.value = openKeys.value;
            openKeys.value = [];
        } else {
            openKeys.value = preOpenKeys.value;
        }
    }

    function menuClick(value: any) {
        console.log(value);
    }
    return { collapsed, selectedKeys, menuList, openKeys, collapse, menuClick };
};

export default defineComponent({
    name: 'leftMenu',
    props: {
        list: {
            default: [],
            type: Object as PropType<Key[]>,
        },
        value: {
            // 需要绑定的值得 key
            default: '',
            type: String,
        },
    },
    components: {},
    setup(props, context) {
        const { collapsed, selectedKeys, openKeys, menuList, collapse, menuClick } = handleMenu();
        const current = ref<string[]>(['0']);
        
        return {
            current,
            menuClick,
            collapsed,
            collapse,
            selectedKeys,
            openKeys,
            menuList,
        };
    },
});
</script>

<style lang="less">
.leftMenu {
    height: 100%;
    ul.ant-menu.ant-menu-inline {
        background-color: transparent;
        li.ant-menu-submenu {
            padding-bottom: 0;
            .ant-menu-submenu-title {
                color: @m-grey2;
                font-size: 16px;
                height: 45px;
                line-height: 45px;
                margin-top: 0;
                margin-bottom: 0;
                padding: 0;
                padding-left: 32px !important;
                .icon {
                    font-size: 20px;
                }
                .menu-item_title {
                    display: inline-block;
                    font-size: 16px;
                    color: @m-grey2;
                }
                .ant-menu-submenu-arrow {
                    left: 12px;
                    color: @m-white0;
                }
            }
            .ant-menu-inline.ant-menu-sub {
                background-color: transparent;
                box-shadow: none;
                .ant-menu-item {
                    padding-left: 64px !important;
                    height: 30px;
                    line-height: 30px;
                    color: @m-grey2;
                    font-size: 14px;
                    margin-top: 0;
                    margin-bottom: 0;
                    padding-right: 0;
                }
            }
        }
        li.ant-menu-submenu-open {
            .ant-menu-submenu-title {
                color: @m-white0;
                .icon {
                    color: @m-white0;
                }
            }
            .ant-menu-sub {
                .ant-menu-item.ant-menu-item-selected {
                    color: @m-blue0;
                    background-color: transparent;
                }
            }
        }
    }
}       
.ant-menu-vertical {
    .ant-menu-submenu-vertical {
        height: 60px;
        line-height: 60px;
        padding: 5px 0;
        .ant-menu-submenu-title {
            height: 50px;
            line-height: 50px;
            .icon {
                font-size: 20px;
            }
        }
    }
    .ant-menu-submenu {
        .ant-menu-submenu-title {
            .menu-item_title {
                display: none;
            }
        }
    }
}

</style>;