前台项目第三天(11)

函数节流与防抖

1.节流：
节流:在规定的间隔范围内不会重复触发回调 只有大于这个时间间隔才会触发回调 把频繁触发变为少量触发
2.防抖
防抖:前面的所有的触发都被取消 最后一次执行在规定的时间之后才会触发 快速触发 只会执行一次
3.使用 lodash插件 调用已经封装好的方法 来节流三级联动展示与隐藏 动态绑定 class类 cur 有 显示 无 隐藏

 data() {
    return {
      //存储鼠标移入哪一个一级分类
      currentIndex: -1,
    }
  },
1
2
3
4
5
6

 <div class="item" v-for="(c1, index) in categoryList" :key="c1.categoryId"
              :class="{ cur: currentIndex == index }">
              <h3 @mouseenter="changeIndex(index)">
                <a href="">{{ c1.categoryName }}--{{ index }}a>
              h3>
              
              <div class="item-list clearfix" :style="{ display: currentIndex == index ? 'block' : 'none' }">
                <div class="subitem" v-for="(c2, index) in c1.categoryChild" :key="c2.categoryId">
                  <dl class="fore">
                    <dt>
                      <a href="">{{ c2.categoryName }}a>
                    dt>
                    <dd>
                      <em v-for="(c3, index) in c2.categoryChild" :key="c3.categoryId">
                        <a href="">{{ c3.categoryName }}a>
                      em>
                    dd>
                  dl>
                div>
              div>
            div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

//引入方式 按需引入lodash
import throttle from 'lodash/throttle';
methods: {
    // changeIndex(index) {
      // console.log(index);//0-15
      //index 鼠标移上某一个一级分类的元素的索引值 可以拿到鼠标移上的是哪一个元素
      // this.currentIndex = index; //此种方式是 es6不支持_. es5支持
    // },
    changeIndex:throttle(function (index) {
      this.currentIndex = index;
    }, 50),
    //一级分类鼠标移出的事件回调
    leaveIndex(index) {
      this.currentIndex = -1;
    }
  }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

4.三级联动组件的路由跳转与传递参数
----三级联动用户可以点击的有 一级分类 二级分类 三级分类 触发时 跳转到search组件 用户选中的产品(产品的名字 产品的id) 进行传递
----路由跳转的两种方式:
----声明式导航:router-link
----编程式导航:push|replace 功能全面
----使用声明式导航 router-link 可以实现路由的跳转与传递参数 但是如果循环过多 会出现卡顿 因为它作为一个组件 生成实例的时候 如果有上千个 进行渲染 耗费性能
//使用(事件委派 + 编程式导航)进行路由跳转
给父元素 all-sort-list2 添加点击事件

 <div class="all-sort-list2" @click="gosearch">
            <div class="item" v-for="(c1, index) in categoryList" :key="c1.categoryId"
              :class="{ cur: currentIndex == index }">
              <h3 @mouseenter="changeIndex(index)">
                <a :data-categoryName="c1.categoryName" :data-category1Id="c1.categoryId">{{ c1.categoryName }}--{{
                    index
                }}a>
                { c1.categoryName }}--{{ index }} -->
              h3>
              
              <div class="item-list clearfix" :style="{ display: currentIndex == index ? 'block' : 'none' }">
                <div class="subitem" v-for="(c2, index) in c1.categoryChild" :key="c2.categoryId">
                  <dl class="fore">
                    <dt>
                      <a :data-categoryName="c2.categoryName" :data-category2Id="c2.categoryId">{{ c2.categoryName
                      }}a>
                      { c2.categoryName }} -->
                    dt>
                    <dd>
                      <em v-for="(c3, index) in c2.categoryChild" :key="c3.categoryId">
                        <a :data-categoryName="c3.categoryName" :data-category3Id="c3.categoryId">{{ c3.categoryName
                        }}a>
                        { c3.categoryName }} -->
                      em>
                    dd>
                  dl>
                div>
              div>
            div>
          div>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30

事件回调

 gosearch(event) {
      //使用(事件委派 + 编程式导航)进行路由跳转 
      //但是 事件委派父元素包含子元素很多 不知道点击的是div 还是a 2.如何区分传递的参数(名称、id)
      // this.$router.push('/search')
      // this.$router.push({name:"",query:{categoryName:'xxx',2id:'xx'}})
      //第一个问题 把子节点当中a标签 加上一个自定义属性 data-categoryName 其余的子节点是没有的
      let el = event.target;
      //获取到当前点击事件的节点【h3、a、dt、dl】 只要带有data-categoryName自定义属性的标签 就一定是 a标签
      //节点有一个方法 dataset 可以获取节点的自定义属性与属性值
      // console.log(el.dataset) //分别解构出属性
      let { categoryname, category1id, category2id, category3id } = el.dataset
      //区分 各个级别的a标签 新的自定义属性就可以知道是 一级、二级、三级的a标签了
      if (categoryname) {
        //整理路由跳转的参数
        let location = { name: "search" };
        //此时query参数 动态添加
        let query = { categoryName: categoryname }
        //一级分类 二级分类 三级分类的a标签
        if (category1id) {
          query.category1Id = category1id;
        } else if (category2id) {
          query.category2Id = category2id;
        } else {
          query.category3Id = category3id;
        }
        //把参数合并整理
        //console.log(location,query);//现在是两个对象 {name:'xxx'} {categoryName:'xxx',category1Id:'x'}
        //给location 动态添加query参数
        location.query = query;
        this.$router.push(location)
      }
    }
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32