华为云菜单栏级联效果

华为云菜单级联效果

之前华为云还是有这种效果的，但是目前看官网给取消掉了，网站是用jquery 操作dom 来实现的菜单联动效果，现在想用vue 来实现一遍，所以得先看看人家的代码，然后跟着作分析实现出来。

设计知识点

• 函数闭包 (Closure)
• 自定义事件派发（dispatchEvent）
• 函数放抖动 (debounce)
• css3 transition

大体思路

用float 布局,ul li横向展开 增添鼠标移入移出事件，给元素增减css 样式控制动画。 当鼠标hover事件到menu 图表中 中展开一级菜单，当进入一级菜单的某一li 是 根据data-key显示二级菜单内容，进入二级菜单类似。 当鼠标移出菜单时，依次从大到小隐藏之前显示的层级。

获取代码

有个App 比较好用可以从爬取整站的前端代码,叫SiteSucker

爬取后的代码

这里代码都是jquery 的函数 比如这种设置隐藏 显示状态的。

            // 设置层级导航显示隐藏的状态
            var setLevelnavState = function ($el, state) {

                var setState = function ($el, state) {
 
                    if (state !== 'show' && state !== 'hide') return;
                    var duration = 300;
                    var isShow = state === 'show';
                    var eventFix = isShow ? 'show' : 'hide';
                    $el.triggerHandler('before' + eventFix);
                    $el.addClass('sliding');
    
                    setTimeout(function () {
                        $el.toggleClass('show', isShow);
                        var called = false;
    
                        $el.one(transitionEnd, function () {
                            called = true;
                            $el.removeClass('sliding');
                            $el.triggerHandler('after' + eventFix);
                        });
    
                        setTimeout(function () {
                            if (!called) {
                                $el.trigger(transitionEnd);
                            }
                        }, duration);
                    }, 0);
                };
    
                var setStateStrategy = {};
    
                setStateStrategy.show = function () {
                    setState($el, 'show');
                };
    
                setStateStrategy.hide = function () {
                    //nextAll() 获得匹配元素集合中每个元素的所有跟随的同胞元素，由选择器筛选是可选的。
                    var $willHideLevel = $el.add($el.nextAll('.header-allnav-level.show'));
                    var $lastShowLevel = $willHideLevel.last();
                    var willHideNumber = $willHideLevel.length;
                    console.log("-----------------------------------------");
                    console.log("$el",$el[0].className);
                    // console.log("$el",$el.nextAll('.header-allnav-level.show'))
                    console.log("$willHideLevel",$willHideLevel);
                    // console.log("$lastShowLevel",$lastShowLevel[0].className);
                    // console.log("$willHideNumber",willHideNumber);
                    console.log("-----------------------------------------");
    
                    // 去除菜单项激活效果
                    $willHideLevel.find('.header-allnav-common-item,[data-define="allnav-item"]').removeClass('active');
                    // 从后往前依次隐藏层级菜单
                    setState($lastShowLevel, 'hide');
                    $willHideLevel.one('afterhide', function () {
                        willHideNumber--;
                        if (willHideNumber <= 0) return;
                        $lastShowLevel = $lastShowLevel.prev('.header-allnav-level');
                        console.log("******************************************");
                        console.log("$lastShowLevel",$lastShowLevel[0].className);
                        console.log("******************************************");
                        setState($lastShowLevel, 'hide');
                    });
                };
                setStateStrategy[state]();
            };
复制代码

vue 仿写的代码

vue_collapse_menu 源码