vue尚品汇商城项目-day03【16.开发Search组件模块中的TypeNav商品分类菜单（过渡动画效果）+17.（优化）针对三级菜单联动进行优化，优化方向为减少查询】

系统管理员 2024-03-24 12:46 8阅读 0赞

![在这里插入图片描述][201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]

#### 文章目录 ####

*   *  16.开发Search组件模块中的TypeNav商品分类菜单（过渡动画效果）
     *  17.（优化）针对三级菜单联动进行优化，优化方向为减少查询
 *  本人其他相关文章链接

### 16.开发Search组件模块中的TypeNav商品分类菜单（过渡动画效果） ###

> 重难点说明

1.  组件与vuex交互
2.  事件控制二三级分类列表的显示与隐藏
3.  优化高频事件触发处理: 利用lodash进行函数节流处理
4.  优化减小打包文件: 对lodash库实现按需引入
5.  解决快速移出后可能显示第一个分类的子分类列表的bug
6.  优化减少组件对象数量: 使用编程式导航代替声明式导航
7.  优化事件处理效率: 利用事件委托
8.  利用标签自定义属性携带动态数据
9.  控制一级列表的显示与隐藏

1.  一级列表显示隐藏的过渡效果

1.  优化请求执行的位置, 减少请求次数

1.  合并分类query参数与搜索的关键字params参数

> 要求：Home组件中三级菜单一直显示，而Search组件中初始进来隐藏，当鼠标划入则显示，鼠标移出则隐藏，另外三级菜单要有过渡动画效果。

过渡动画：前提组件|元素务必要有v-if|v-show指令才能进行过渡动画控制。

> 新增代码如下：Search组件中使用/

<template>
      <div>我是搜索页
        <TypeNav></TypeNav>
      </div>
    </template>

> TypeNav组件中使用@mouseleave和 @mouseenter对show属性显隐进行控制

<div @mouseleave="leaveIndex" @mouseenter="enterShow">
      <transition name="sort">
        <div class="sort" v-show="show">
        </div>
      </transition>
    </div>
    ---------------------------------------------------------------------------
    data() {
        return {
          show:true
        }
    },
    ---------------------------------------------------------------------------  
    //组件挂载完毕
    mounted() {
        //当组件挂载完毕，让show属性变为false
        //如果不是Home路由组件，将typeNav进行隐藏
        if (this.$route.path != "/home") {
          this.show = false;
        }
    }, 
    ---------------------------------------------------------------------------
    methods: {
    //当鼠标离开的时候，让商品分类列表进行隐藏
        leaveIndex() {
          this.currentIndex = -1;
          //判断如果是Search路由组件的时候才会执行
          if (this.$route.path != '/home') {
            this.show = false;
          }
        },
        //当鼠标移入的时候，让商品分类列表进行展示
        enterShow() {
          if (this.$route.path != '/home') {
            this.show = true;
          }
        }
      },
    ---------------------------------------------------------------------------  
    //过渡动画的样式
    //过渡动画开始状态（进入）
        .sort-enter {
          height: 0px;
    }
    // 过渡动画结束状态（进入）
        .sort-enter-to {
          height: 461px;
    }
    // 定义动画时间、速率
        .sort-enter-active {
          transition: all 0.5s linear;
    }

`注意點1`：

> 问题：Search組件中使用三級联动菜单TypeNav需要引入吗？

答案：不需要，因为三級联动菜单TypeNav是注册的全局组件，可以直接使用。

`注意點2`：通过show属性控制三级菜单的显隐，设计思路是：初始化show：true -> 通过mounted()钩子函数判断当路由为非home组件时设置show = false，这样当进入Search组件时菜单会默认自动隐藏 -> 定义鼠标划入、离开的函数，进行显隐控制

`注意點3`：

> 问题：控制划入+划出的@mouseenter和@mouseleave应该放在哪一层上？

答案：也应该放在父层上，还是父类委派操作，同时添加路由路径逻辑判断控制show的属性。

`注意點4`：

> 问题：v-show属性应该放在哪一层上？

答案：应该放在“全部商品分类”标签的里面元素，而不是放在父类元素。因为如果放在父类元素错误效果是当进入Search组件时整个菜单就完全隐藏后续无法进行显示了。

> 正确代码请看，请注意v-show所在元素的位置

<div @mouseleave="leaveIndex" @mouseenter="enterShow">
            <h2 class="all">全部商品分类</h2>
            
            <transition name="sort">
              
              <div class="sort" v-show="show">

> 正确效果如图

![在这里插入图片描述][d1e1690e4b854fc5adc9477362f56db3.gif_pic_center]

> 错误代码请看，请注意v-show所在元素的位置

<div @mouseleave="leaveIndex" @mouseenter="enterShow" v-show="show">
            <h2 class="all">全部商品分类</h2>
            
            <transition name="sort">
              
              <div class="sort" >

> 错误效果如图

![在这里插入图片描述][0255580bbd4240bda2592289511b533a.gif_pic_center]

`注意點5`：使用动画效果，要使用标签/进行包裹，另外配合样式搭配使用

<transition name="sort">
    ...
    </transition>
    
    //过渡动画的样式
        //过渡动画开始状态（进入）
        .sort-enter {
          height: 0px;
        }
        // 过渡动画结束状态（进入）
        .sort-enter-to {
          height: 461px;
        }
        // 定义动画时间、速率
        .sort-enter-active {
          transition: all 0.5s linear;
        }

### 17.（优化）针对三级菜单联动进行优化，优化方向为减少查询 ###

消耗资源场景：正常情况下查询list的接口放在TypeNav组件中，这样坏处是进入Home组件会请求一次，当点击跳转Search组件时Home组件销毁然而查询list的接口还会再次执行一次，也就是存在多次查询相同接口的场景。

优化方案：想办法减少或者只执行一次查询到处使用。优化方案把查询list的接口放在App.vue的mounted()方法中，因为App.vue只会执行一次，代码如下

> 把TypeNav的mounted()中的查询移到App.vue的mounted()中

mounted() {
        //派发一个action||获取商品分类的三级列表的数据
        this.$store.dispatch("getCategoryList")
      }

> 问题1：能否把查询list接口方法这行放在main.js中，因为main.js也只执行一次。

答案：不能，因为main.js是个js文件，哪怕打印里面的this，控制台会输出underfine，而App.vue中的this指代的是组件实例，而只有组件实例才有$store的属性，所以只能放在App.vue中。

## 本人其他相关文章链接 ##

1.[vue尚品汇商城项目-day03【16.开发Search组件模块中的TypeNav商品分类菜单（过渡动画效果）+17.（优化）针对三级菜单联动进行优化，优化方向为减少查询】][vue_-day03_16._Search_TypeNav_17.]  
2.[vue尚品汇商城项目-day03【18.合并params和query参数（Header组件+TypeNav组件）】][vue_-day03_18._params_query_Header_TypeNav]  
3.[vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）】][vue_-day03_vue_-19.mockjs_Home_ListContainer_Floor]  
4.[vue尚品汇商城项目-day03【20.获取Banner轮播图的数据+21.使用swiper轮播图插件】][vue_-day03_20._Banner_21._swiper]  
5.[vue尚品汇商城项目-day03【22.开发Floor组件】][vue_-day03_22._Floor]

[201cb7e59bb94276b20be0c55371360b.jpeg_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/8f523d8a141b47a79acc6b858f493e59.png
[d1e1690e4b854fc5adc9477362f56db3.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/99c295c544ec413585e27b9d7b02309d.png
[0255580bbd4240bda2592289511b533a.gif_pic_center]: https://image.dandelioncloud.cn/pgy_files/images/2024/03/24/b3bb8d6eb4a849e8b65ee9c60e5666bf.png
[vue_-day03_16._Search_TypeNav_17.]: https://blog.csdn.net/a924382407/article/details/129893325
[vue_-day03_18._params_query_Header_TypeNav]: https://blog.csdn.net/a924382407/article/details/129893392
[vue_-day03_vue_-19.mockjs_Home_ListContainer_Floor]: https://blog.csdn.net/a924382407/article/details/129893467
[vue_-day03_20._Banner_21._swiper]: https://blog.csdn.net/a924382407/article/details/129893511
[vue_-day03_22._Floor]: https://blog.csdn.net/a924382407/article/details/129893541