Vue2项目实战--b站尚硅谷--尚品汇项目--详细笔记--day03

本文链接：https://blog.csdn.net/m0_55644132/article/details/127507875

1 完成一级分类动态添加背景颜色

方案一：采用样式完成

.item:hover{
    background: skyblue;
}

方案二：采用JS

遍历数组的时候需要得到索引值：(c1, index)
初始化一个响应式数据： data() { return { //鼠标移动到哪一个分类 currentInedx: -1, } }
给一级标题文字绑定事件：@mouseenter="changeIndex(index)"考虑是否传参
写方法：changeIndex(index) { //index是一级分类的索引值 this.currentInedx = *index*; }
给遍历的每一个一级分类绑定类.cur 判断当前索引值是否在0-15之中，:class="{ cur: currentInedx == index }"
是的话显示样式，style中添加类样式.cur { background: skyblue; }
考虑鼠标移除时，样式消失，再来一个事件。注意这里想清楚要给谁加，如果给一级分类标题添加事件的话，当鼠标移动到【全部商品分类】时，样式会消失，但我们想要也有样式，那就用事件委派，给一级分类及标题文字外面加一个div盒子，事件放在最外面，这样效果就会实现；而且当鼠标移动到二级菜单时，样式也还在，因为索引值还在，为变成-1：<div @mouseleave="leaveIndex">、 leaveIndex() { this.currentInedx = -1; }

2 通过`JS`控制二三级分类的显示与隐藏

方案一：通过CSS样式 dislpay: block|none 显示与隐藏

&:hover {
	.item-list {
		display: block;
	}
}

方案二：采用JS

法1 给二三级分类绑定：:style="{display:currentInedx==index?'block':'none'}"
法2 用v-show = 'currentIndex==index' 、这里注意把原item-list中的 display:none 去掉

3 卡顿现象

正常情况下事件触发，回调函数执行；但是用户鼠标经过一级标题太快，只会有部分h3被触发

**节流：**在规定的间隔事件范围内不会重复触发回调，只有大于这个时间间隔才会触发回调，把频繁触发变为少量触发（意思就是规定时间内只能执行一次，给浏览器充分时间解析代码）（轮播图中有用到）

**防抖：**前面的所有触发都被取消，最后一次执行在规定的时间之后才会触发（比如input中，全部输入结束之后，间隔1s才会触发），也就是说如果连续快速触发，只会执行一次

自己手写防抖与节流需要：闭包+延迟器

引入lodash库，节流：_.throttle(func, [wait=0], [options=])、防抖：_.debounce(func, [wait=0], [options=])

//全部引入
import _ from 'lodash'
//按需引入--之引入需要的函数
import throttle from "lodash/throttle";
//
changeIndex: throttle(function (index) {
  this.currentIndex = index;
}, 50),

4 完成三级联动节流的操作

引入节流插件（部分引入即可）：import { throttle } from "lodash"或者 import throttle from "lodash/throttle"

changeIndex: throttle(function (index) {
	this.currentInedx = index;
}, 10),

5 三级联动组件的路由跳转与参数传递

三级联动用户可以点击：一级分类、二级分类、三级分类

点击的时候Home模块跳转到Search模块，以及会把用户选中的产品（产品名字，产品的ID）在路由跳转到饿时候，进行传递

路由跳转的方式：

声明式导航router-link

可以实现路由跳转与传递参数，但是需要注意，会出现卡顿现象

router-link：是一个组件，当服务器的数据返回之后，循环出很多router-link组件（创建组件实例），需要内存，因此卡顿

编程式导航

用事件委派将@click="goSearch"写在a标签的上一级盒子中，不然每个a标签都要写

缺点是：

点击的怎么知道是a标签，里面有：h3、dt、dl、em、a；即使点击a标签，如何区分是一二三级的

如何获取参数（123级分类的产品名称和ID）

最好的方法是：编程式导航+事件委派

6 完成三级联动路由跳转与传递参数

    goSearch() {
      //最好的方法是：编程式导航+事件委派
      // this.$router.push("/search");

      //解决第一个问题 确定点击的是某一级中的a标签，通过给a标签添加自定义属性的方式
      //获取当前触发事件的节点【h3，a、dt、dl】，但是我们要的是a节点（有data-categoryName一定是a标签）
      let element = event.target;
      //节点的dataset属性，可以获取节点的自定义属性与属性值 对象解构写法；注意浏览器里面是全都小写的
      let { categoryname, category1id, category2id, category3id } =
        element.dataset;
      //如果标签上有data-categoryName的，一定是a标签
      if (categoryname) {
        //整理路由跳转的参数
        let location = { name: "search" };
        let query = { categoryName: categoryname };
        //if里面动态添加id
        //判断是一二三级中的哪一级a标签 同样使用自定义属性
        if (category1id) {
          query.category1Id = category1id;
        } else if (category2id) {
          query.category2Id = category2id;
        } else {
          query.category3Id = category3id;
        }
        //整理好参数 动态添加
        location.query = query;
        //路由跳转
        this.$router.push(location);
      }
    },