函数节流与防抖
1.节流:
节流:在规定的间隔范围内不会重复触发回调 只有大于这个时间间隔才会触发回调 把频繁触发变为少量触发
2.防抖
防抖:前面的所有的触发都被取消 最后一次执行在规定的时间之后才会触发 快速触发 只会执行一次
3.使用 lodash插件 调用已经封装好的方法 来节流三级联动展示与隐藏 动态绑定 class类 cur 有 显示 无 隐藏
data() {
return {
//存储鼠标移入哪一个一级分类
currentIndex: -1,
}
},
<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>
//引入方式 按需引入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;
}
}
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>
<!-- <router-link >{{ c1.categoryName }}--{{ index }}</router-link> -->
</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>
<!-- <router-link >{{ c2.categoryName }}</router-link> -->
</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>
<!-- <router-link >{{ c3.categoryName }}</router-link> -->
</em>
</dd>
</dl>
</div>
</div>
</div>
</div>
事件回调
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)
}
}