Slider-menu 菜单联动

左右联动菜单组件。

注意事项

• 因为此组件实际开发过程中定制性非常高，故提供基础模板，建议开发时将源码移到项目中进行修改。
• 当右边内容高度不足以撑满一屏幕时，不推荐使用此组件以免造成不可控问题。
• 当右侧最后几个内容块高度较短，同时显示在一屏幕内时，左侧对应菜单可能会出现不会高亮选中的情况，或者左侧菜单不能点击的情况，属于正常现象。

效果

使用方法

<template>
    <div class="lc-demo">
 
        <lc-title title="菜单联动"></lc-title>
            
        <lc-slider-menu :menus="menus"  :menuStyles='menuStyles'></lc-slider-menu>

    </div>
</template>

<script>
    import LcTitle from '_mods/title.vue';
    import Category from '_mods/category.vue';
    export default {
        components: { LcTitle, Category },  
        data() {
            return {
                menuStyles:{
                    width:75,
                    height:50
                },
                menus: [
                    {
                    name: '菜单1',
                    data: [
                        {
                        name: '1.1'
                        },
                        {
                        name: '1.2'
                        },
                        {
                        name: '1.3'
                        },
                        {
                        name: '1.4'
                        },
                        {
                        name: '1.5'
                        },
                        {
                        name: '1.6'
                        }
                    ]
                    },
                    {
                    name: '菜单2',
                    data: [
                        {
                        name: '1.1'
                        },
                        {
                        name: '1.2'
                        },
                        {
                        name: '1.3'
                        },
                        {
                        name: '1.4'
                        },
                        {
                        name: '1.5'
                        },
                        {
                        name: '1.6'
                        }
                    ]
                    },
                    {
                    name: '菜单3',
                    data: [
                        {
                        name: '1.1'
                        },
                        {
                        name: '1.2'
                        },
                        {
                        name: '1.3'
                        },
                        {
                        name: '1.4'
                        },
                        {
                        name: '1.5'
                        },
                        {
                        name: '1.6'
                        }
                    ]
                    },
                    {
                    name: '菜单4',
                    data: [
                        {
                        name: '1.1'
                        },
                        {
                        name: '1.2'
                        },
                        {
                        name: '1.3'
                        },
                        {
                        name: '1.4'
                        },
                        {
                        name: '1.5'
                        },
                        {
                        name: '1.6'
                        }
                    ]
                    },
                    {
                    name: '菜单5',
                    data: [
                        {
                        name: '1.1'
                        },
                        {
                        name: '1.2'
                        },
                        {
                        name: '1.3'
                        },
                        {
                        name: '1.4'
                        },
                        {
                        name: '1.5'
                        },
                        {
                        name: '1.6'
                        }
                    ]
                    },
                    {
                    name: '菜单6',
                    data: [
                        {
                        name: '1.1'
                        },
                        {
                        name: '1.2'
                        },
                        {
                        name: '1.3'
                        },
                        {
                        name: '1.4'
                        },
                        {
                        name: '1.5'
                        },
                        {
                        name: '1.6'
                        }
                    ]
                    },
                    {
                    name: '菜单7',
                    data: [
                        {
                        name: '1.1'
                        },
                        {
                        name: '1.2'
                        },
                        {
                        name: '1.3'
                        },
                        {
                        name: '1.4'
                        },
                        {
                        name: '1.5'
                        },
                        {
                        name: '1.6'
                        }
                    ]
                    },
                    {
                    name: '菜单8',
                    data: [
                        {
                        name: '1.1'
                        },
                        {
                        name: '1.2'
                        },
                        {
                        name: '1.3'
                        },
                        {
                        name: '1.4'
                        },
                        {
                        name: '1.5'
                        },
                        {
                        name: '1.6'
                        }
                    ]
                    },
                    {
                    name: '菜单9',
                    data: [
                        {
                        name: '1.1'
                        },
                        {
                        name: '1.2'
                        },
                        {
                        name: '1.3'
                        },
                        {
                        name: '1.4'
                        },
                        {
                        name: '1.5'
                        },
                        {
                        name: '1.6'
                        }
                    ]
                    }
                ],
            }
        },
        methods: {
        }
    }
</script>
<style scoped>
.cascad-menu{ top:50px;}
</style>

可配置参数

Prop	Type	Required	Default	Description
menus	Array	N	-	联动菜单数据项（注1）
menuStyles	Object	N		左边导航样式（注2）

注1：此模板提供的数据结构固定，因为实际开发中数据类型和结构不可控，故在此只提供参考数据格式。

注2：单个属性定义如下：

• width：菜单宽度
• height：菜单高度