华为云菜单栏级联效果

叁歲伎倆 2022-01-20 03:13 239阅读 0赞

### 华为云菜单级联效果 ###

> 之前华为云还是有这种效果的，但是目前看官网给取消掉了，网站是用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 源码][vue_collapse_menu]

[vue_collapse_menu]: https://link.juejin.im?target=https%3A%2F%2Fgithub.com%2Fzhaojinxiong%2Fvue_collapse_menu